Utilities - Float

You can use the float utility on any element, for any breakpoint.

Basic Example

You can use the float utility classes to float an element to the left or right, or to disable floating, responsively. The utilities use the same viewport breakpoints as the grid system.

I'm floating left.
I'm floating right.
I'm not floating.
<div class="_clearfix">
    <div class="_float:left">I'm floating left.</div>
</div>

<div class="_clearfix">
    <div class="_float:right">I'm floating right.</div>
</div>

<div class="_clearfix">
    <div class="_float:none">I'm not floating.</div>
</div>

Responsive

Float utilities can be applied responsively using the following helper classes:

  • ._float:left
  • ._float:right
  • ._float:none
  • ._{xs|sm|md|lg|xl|xxl}:float:left
  • ._{xs|sm|md|lg|xl|xxl}:float:right
  • ._{xs|sm|md|lg|xl|xxl}:float:none

I'm floating right starting from extra small screens.
I'm floating right starting from small screens.
I'm floating right starting from medium screens.
I'm floating right starting from large screens.
I'm floating right starting from extra large screens.
<div class="_clearfix">
    <div class="_xs:float:right">I'm floating right starting from extra small screens.</div>
</div>

<div class="_clearfix">
    <div class="_sm:float:right">I'm floating right starting from small screens.</div>
</div>

<div class="_clearfix">
    <div class="_md:float:right">I'm floating right starting from medium screens.</div>
</div>

<div class="_clearfix">
    <div class="_lg:float:right">I'm floating right starting from large screens.</div>
</div>

<div class="_clearfix">
    <div class="_xl:float:right">I'm floating right starting from extra large screens.</div>
</div>