Background Color
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.
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.
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.
.text-primary-subtle.bg-secondary-subtle
.bg-success-subtle.bg-danger-subtle.bg-warning-subtle.bg-info-subtle.bg-pink-subtle.bg-purple-subtle.bg-light-subtle.bg-dark-subtleColor & background
Color and background helpers combine the power of our
.text-* utilities and .bg-* utilities in one class.
Using our Sass color-contrast() function, we automatically
determine a contrasting color for a particular
background-color.
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.
Text Color
Colorize text with color utilities. If you want to
colorize links, you can use the .link-* helper classes which have
:hover
and :focus states.
.text-primary
.text-primary-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-danger
.text-danger-emphasis
.text-info
.text-info-emphasis
.text-pink
.text-pink-emphasis
.text-purple
.text-purple-emphasis
.text-warning
.text-warning-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.
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.
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-opacity
utilities:
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, 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
Bootstrap provides .pe-none and
.pe-auto classes to prevent or add element interactions.
Overflow
Adjust the overflow property on the fly
with four default values and classes. These classes are not
responsive by default.
.overflow-auto on an element
with set width and height dimensions. By
design, this content will vertically scroll.
.overflow-hidden on an element
with set width and height dimensions.
.overflow-visible on an element
with set width and height dimensions.
.overflow-scroll on an element
with 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 our box-shadow utility
classes. Includes support for .shadow-none and three default
sizes (which have associated variables to
match).
Width
Width utilities are generated from the utility API in
_utilities.scss. Includes support for
25%, 50%, 75%, 100%, and
auto by default. Modify
those values as you need to generate different utilities here.
Height
Height utilities are generated from the utility API
in _utilities.scss. Includes support for
25%, 50%, 75%, 100%, and
auto by default. Modify
those values as you need to generate different utilities here.
Object fit
Change the value of the object-fit
property with 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
Object fit
Change the value of the object-fit
property with 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.