Float Utilities

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

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.

Float Utility Example
I'm floating left.

I'm floating right.

I'm not floating.

Float utilities do not affect flex items.

Responsive

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

  • ._float-{xs|sm|md|lg|xl}-left
  • ._float-{xs|sm|md|lg|xl}-right
  • ._float-{xs|sm|md|lg|xl}-none
Responsive Float Utility Example
I'm floating right on extra small screens.

I'm floating right on small screens.

I'm floating right on medium screens.

I'm floating right on large screens.

I'm floating right on extra large screens.