Utilities

  1. Base UI
  2. Utilities

Borders

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Border width

.border.border-1

.border.border-2

.border.border-3

.border.border-4

.border.border-5

Additive

.border

.border-top

.border-end

.border-bottom

.border-start

Subtractive

.border-0

.border-top-0

.border-end-0

.border-bottom-0

.border-start-0

Border Color

.border-primary

.border-secondary

.border-success

.border-info

.border-warning

.border-danger

.border-dark

Border Style

.border-dotted

.border-dashed

.border-groove

.border-outset

.border-ridge

.border-inset

Additive

.border-start-dashed

.border-top-dashed

.border-end-dashed

.border-bottom-dashed

Border Opacity

.border-opacity-10

.border-opacity-25

.border-opacity-50

.border-opacity-75

.border-opacity-100

Border Radius

Use below-mentioned class to an element to easily round its corners.

rounded

.rounded

rounded-top

.rounded-top

rounded-end

.rounded-end

rounded-bottom

.rounded-bottom

rounded-start

.rounded-start

rounded-circle

.rounded-circle

rounded-top

.rounded-top

rounded-pill

.rounded-pill

Sizes
rounded-0

.rounded-0

rounded-1

.rounded-1

rounded-2

.rounded-2

rounded-3

.rounded-3

rounded-4

.rounded-4

rounded-5

.rounded-5

Display Property

Use below-mentioned class to an element to display the value of components and more with our display utilities.

Display classes
Display Property Class
Display : none .d-none
Display : inline .d-inline
Display : inline-block .d-inline-block
Display : block .d-block
Display : table .d-table
Display : table-cell .d-table-cell
Display : table-row .d-table-row
Display : flex .d-flex
Display : inline-flex .d-inline-flex
Hiding elements
Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
Display in print

Change the display value of elements when printing with our print display utility classes.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Custom Class

Use the below-mentioned class to an element to custom display the value of components and more with our display utilities.

Property Class
font-family: 'Outfit', sans-serif; .ff-base
font-family: 'Outfit', sans-serif; .ff-secondary
font-weight: 500; .fw-medium
min-width: 80px; .w-xs
min-width: 95px; .w-sm
min-width: 110px; .w-md
min-width: 140px; .w-lg
min-width: 160px; .w-xl

Stacks - Vertical

Use vstack class to create vertical layouts. Stacked items are full-width by default. Use gap- class with variation to add space between items.

First item
Second item
Third item
Vertical Stacks Examples

Stacks - Horizontal

Use hstack class to create horizontal layouts. Stacked items are full-width by default. Use gap- class with variation to add space between items.

First item
Second item
Third item

Using horizontal margin utilities like ms-auto as spacers:

First item
Second item
Third item
First item
Second item
Third item
Horizontal Stacks Examples

Text Selection

Use user-select-all, user-select-auto, or user-select-none class to the content which is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Pointer Events

Use pe-none class to prevent and pe-auto class to add element interactions respectively.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Overflow

Use overflow property on the fly with four default values and classes.

Overflow Auto
This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
Overflow Hidden
This is an example of using .overflow-hidden on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overflow Visible
This is an example of using .overflow-visible on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Overflow Scroll
This is an example of using .overflow-scroll on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Position

Arrange elements
Center elements
Center elements

Shadows

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Larger shadow

Width

Use w-25,w-50,w-75,w-100 or w-auto class to set width 25%, 50%, 75%, 100%, or auto by default respectively.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Height

Use h-25,h-50,h-75,h-100 or h-auto class to set height 25%, 50%, 75%, 100%, or auto by default respectively.

Height25%
Height 50%
Height 75%
Height 100%
Height auto
2024 © Velzon.
Design & Develop by Themesbrand