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-outset
Responsive Border
.border-bottom-lg-0
.border-end-lg-0
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-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-top
.rounded-pill
Sizes
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.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: 'Inter', sans-serif; | .ff-primary |
| font-family: 'Inter', sans-serif; | .ff-secondary |
| 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.
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.
Using horizontal margin utilities like
ms-auto as spacers:
Horizontal Stacks Examples
Object Fit
Use the object fit utilities to modify how the content of
a replaced element, such as an <img> or
<video>, should be resized to fit its container.
.object-fit-cover
.object-fit-contain
.object-fit-fill
.object-fit-scale
.object-fit-none
Z-index
Use our low-level z-index utilities to
quickly change the stack level of an element or component.
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.
Overflow
Use overflow property on the fly with four
default values and classes.
Overflow Auto
.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
.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
.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
.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
Use below mentioned classes to arrange elements easily with the edge positioning utilities.The format is {property}-{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).
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.
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.