Additional Content

Display Inline

d-inline
d-inline

D-block

d-block d-block d-block

Float

Float start
Float end
Don't float

Float Responsive

Float sm

Float md

Float lg

Float xl

Text Selection

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

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 pointer-events-auto class and can be clicked.

Gap

Grid item 1
Grid item 2
Grid item 3

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

Examples

No shadow
Small shadow
Regular shadow
Larger shadow

Vertical Alignment With Table Cells

baseline top middle bottom text-top text-bottom

Vertical Alignment With Inline Elements

baseline top middle bottom text-top text-bottom

Opacity

100%
75%
50%
25%

Horizontal Centering

Centered element

Relative to the Parent

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

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

...
Max-height 100%