Float

Toggle floats on any element

Float

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. Please be aware float utilities have no effect on flex items.

Float left
Float right
Don't float

Responsive Float

Float utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.

As such, the classes are named using the format:

• .float-{value} for sm to xl
• .float-{breakpoint}-{value} for sm, md, lg,and xl.

Where value is one of: none,left,right

Float left
Float right
Don't float