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 onGitHub