Utilities
Background Color
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilitiesdo not set color, so in some cases you’ll want to use .text-*color utilities.
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-body-secondary
.bg-body-tertiary
.bg-white
.bg-black
.bg-transparent
Background Gradient Color
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
.bg-gradient.bg-primary
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
.bg-black.bg-gradient
Soft Background
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-*color utilities.
.bg-primary-subtle.bg-secondary-subtle.bg-success-subtle.bg-danger-subtle.bg-warning-subtle.bg-info-subtle.bg-light-subtle.bg-dark-subtleBackground Gradient Color 2
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not setcolor, so in some cases you’ll want to use.text-*color utilities.
.bg-primary-gradient
.bg-secondary-gradient
.bg-warning-gradient
.bg-info-gradient
.bg-success-gradient
.bg-danger-gradient
.bg-light-gradient
.bg-dark-gradient
Color & Background
Color and background helpers combine the power of our.text-* utilities and .bg-*utilities in one class. Using our Sasscolor-contrast() function, we automatically determine a contrasting color for a particularbackground-color.
Primary with contrasting color (.text-bg-primary)
Secondary with contrasting color (.text-bg-secondary)
Success with contrasting color (.text-bg-success)
Danger with contrasting color (.text-bg-danger)
Warning with contrasting color (.text-bg-warning)
Info with contrasting color (.text-bg-info)
Light with contrasting color (.text-bg-light)
Dark with contrasting color (.text-bg-dark)
Colored links
You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a:hover and :focusstate.
Background Opacity
background-color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
This is default primary background
This is 75% opacity primary background
This is 50% opacity primary background
This is 25% opacity primary background
This is 10% opacity success background
Text Color
Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focusstates.
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-warning
.text-warning-emphasis
.text-info
.text-info-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-muted
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
Text Opacity Color
text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
Opacity
The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all,.5 is 50% visible, and 0 is completely transparent. Set the opacity of an element using.opacity-{value}utilities.
100%
75%
50%
25%
Additive(Add) Border
Use border utilities to add an element’s borders. Choose from all borders or one at a time.
Subtractive(Remove) Border
Use border utilities to remove an element’s borders. Choose from all borders or one at a time.
Border Color
Change the border color using utilities built on our theme colors.
Border Width Size
Border Opacity
choose from any of the .border-opacityutilities:
This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
Border Subtle Color
Change the border color using utilities built on our theme colors.
Border Radius
Add classes to an element to easily round its corners.
Border Radius Size
Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5.
Text Selection
Use user-select-all,user-select-auto, oruser-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
Bootstrap provides .pe-none and.pe-auto classes to prevent or add element interactions.
This linkcan not be clicked.
This linkcan be clicked (this is default behavior).
This linkcan not be clicked because the pointer-eventsproperty is inherited from its parent. However,this linkhas a pe-auto class and can be clicked.
Overflow
Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.
This is an example of using
.overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.This is an example of using
.overflow-hiddenon an element with set width and height dimensions.This is an example of using
.overflow-visibleon an elementwith set width and height dimensions.This is an example of using
.overflow-scrollon an elementwith set width and height dimensions.Position in Arrange
Arrange elements easily with the edge positioning utilities. The format is{property}-{position}.
Position in Center
In addition, you can also center the elements with the transform utility class .translate-middle.
Position in Axis
By adding .translate-middle-x or.translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.
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 ourbox-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
Width utilities are generated from the utility API in_utilities.scss. Includes support for25%, 50%, 75%,100%, andauto by default. Modify those values as you need to generate different utilities here.
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height
Height utilities are generated from the utility API in_utilities.scss. Includes support for25%, 50%, 75%,100%, andauto by default. Modify those values as you need to generate different utilities here.
Height25%
Height50%
Height75%
Height100%
Height auto
Object Fit
Change the value of theobject-fitpropertywith our responsive object-fit utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
.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 ourposition utilities.
z-3
z-2
z-1
z-0
z-n1