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.

Material Design Breakpoints
DeviceCodeTypeRange
Extra smallxsSmall to large phone< 600px
SmallsmSmall to medium tablet600px > < 960px
MediummdLarge tablet to laptop960px > < 1280px
LargelgLaptop to desktop1280px > < 1920px
Extra largexl1080p to 1440p desktop1920px > < 2560px
Extra extra largexxl4k and ultra-wide> 2560px
Specification

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.
Edit this page onGitHub