Utility classes

Some of the most required classes to have for the ease of development.

Bootstrap 5

Also, visit our documentation page.

Opacity

Control the opacity of elements.

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.

100%
75%
50%
25%

Shadows

Add or remove shadows to elements with box-shadow utilities.

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

No shadow
Small shadow
Regular shadow
Larger shadow

Overflow

Use these shorthand utilities for quickly configuring how content overflows an element.

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-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.