Overview#

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. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.

{ {< example >} }

Float start on all viewport sizes


Float end on all viewport sizes


Don't float on all viewport sizes

{ {< /example >} }

Use the clearfix helper on a parent element to clear floats.

Responsive#

Responsive variations also exist for each float value.

{ {< example >} }

Float end on viewports sized SM (small) or wider


Float end on viewports sized MD (medium) or wider


Float end on viewports sized LG (large) or wider


Float end on viewports sized XL (extra large) or wider


Float end on viewports sized XXL (extra extra large) or wider


{ {< /example >} }

Here are all the support classes:

{ { < markdown }} { {< float.inline >} } { {- range $.Site.Data.breakpoints } }

  • .float{ { .abbr } }-start
  • .float{ { .abbr } }-end
  • .float{ { .abbr } }-none { {- end -} } { {< /float.inline >} } { { < /markdown }}

CSS#

Sass utilities API#

Float utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

{ { < scss-docs name="utils-float" file="scss/_utilities.scss" }}