# 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.
| Device | Code | Type | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 960px |
| Medium | md | Large tablet to laptop | 960px > < 1264px* |
| Large | lg | Desktop | 1264px > < 1904px* |
| Extra large | xl | 4k 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-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 on GitHub
Last updated:07/07/2020, 9:46:36 PM