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-5Additive
.border.border-top.border-end.border-bottom.border-startSubtractive
.border-0.border-top-0.border-end-0.border-bottom-0.border-start-0Border Color
.border-primary.border-secondary.border-success.border-danger.border-info.border-warning.border-darkBorder 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
Text Opacity Colors
To change that opacity, override --bs-text-opacity via custom styles or inline styles.
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
Background Opacity Colors
Or, choose from any of the .bg-opacity utilities:
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
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-noneshadow-smshadowshadow-lg
