Change the default document flow with these display, float, and other utilities.
Display
To adjust the display of an element, use the .block
, .inline
, .inline-block
, .table
, and .table-cell
utilities.
inlineinline-blockblock table-cell table-cell
Overflow
To adjust element overflow, use .overflow-hidden
, .overflow-scroll
, and .overflow-auto
.
.overflow-hidden
can also be used to create a new block formatting context or clear floats.
Floats
Use .clearfix
, .left
, and .right
to clear and set floats.
.left .right
Max Width
Use .fit
to set max-width 100%.
Box-Sizing Border-Box
Use .border-box
to set box-sizing border-box per element.
.border-box
Media Object
Create a media object using basic utilities.
Image Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
Double-Sided Media Object
For a container with a flexible center, use a double-sided media object.
Image Image Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.