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 > < 1280px |
| Large | lg | Laptop to desktop | 1280px > < 1920px |
| Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px |
| Extra extra large | xxl | 4k 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