# 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 > < 1264px*
LargelgDesktop960px > < 1264px*
Extra largexl4k and ultra-wide> 1904px*
* -16px on desktop for browser scrollbar
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-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .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 on GitHub
Last updated:09/29/2020, 2:21:30 PM