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%.
Use max-width utilities to control the width of containers.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
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.