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-2
.border-3
.border-4
.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-danger
.border-info
.border-warning
.border-dark
Border Opacity
default
.border-opacity-75
.border-opacity-50
.border-opacity-25
.border-opacity-10
Border Radius
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
Border Radius Sizes
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
Stacks - Vertical
Use
.vstack
to create vertical layouts. Stacked items are full-width by default. Use
.gap-*
utilities to add space between items.
Vertical Stacks Example
Stacks - Horizontal
Use
.vstack
to create vertical layouts. Stacked items are full-width by default. Use
.gap-*
utilities to add space between items.
Using horizontal margin utilities like ms-auto as spacers:
Horizontal Stacks Examples
Object fit
Add the
object-fit-{value}
class to the
replaced element
.object-fit-contain
.object-fit-cover
.object-fit-fill
.object-fit-scale
.object-fit-none
Z-index
Use
z-index
utilities to stack elements on top of one another. Requires a
position
value other than
static
, which can be set with custom styles or using our
position utilities
.
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).
.shadow-none
shadow-sm
shadow
shadow-lg
