Utilities

Bootstrap’s utility classes can be used to quickly style elements without writing any custom CSS.

Utilities

Background

.bg-primary
.bg-gradient-primary
.bg-opacity-75

Borders

.border-3
.rounded

Colors

.text-primary

.text-opacity-50

Display

d-inline
d-block

Flex

I'm a flexbox container!
I'm an inline flexbox container!

Float

Float start
Float end

Interactions

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.

Opacity

100%
75%
50%
25%

Overflow

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

Position

Top Start
Top End
Center
Bottom Start
Bottom End

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Sizing

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Spacing

Margin 3, Padding 3
Centered with mx-auto

Text

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

Bold text.

Italic text.

Vertical Align

baseline top middle bottom text-top text-bottom

Visibility

Visible