# Float

Applies a custom float across any breakpoint with responsive float utilities.

# Overview

Float utility classes apply floating based upon the current viewport size using the CSS float property.

# Classes

Easily toggle a float with a class:

# Responsive

Floats can also be applied on a per breakpoint (viewport) basis.

Here is a list of all the available support classes:

  • .float-left
  • .float-right
  • .float-start
  • .float-end
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.