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-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 utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

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.

Add classes to an element to easily round its corners.

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Use the scaling classes for larger or smaller rounded corners. Sizes range from 0 to 5.

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.

Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

Arrange elements easily with the edge positioning utilities. The format is {property}-{position}.

In addition, you can also center the elements with the transform utility class .translate-middle.

By adding .translate-middle-x or .translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

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 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 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.

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.

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.