Float

Applies a custom float across any breakpoint with responsive float utilities.

Class	Properties
float-left	float: left;
float-right	float: right;
float-start	float: start;
float-end	float: end;
float-none	float: none;
float-sm-left	float: left;
float-sm-right	float: right;
float-sm-start	float: start;
float-sm-end	float: end;
float-sm-none	float: none;
float-md-left	float: left;
float-md-right	float: right;
float-md-start	float: start;
float-md-end	float: end;
float-md-none	float: none;
float-lg-left	float: left;
float-lg-right	float: right;
float-lg-start	float: start;
float-lg-end	float: end;
float-lg-none	float: none;
float-xl-left	float: left;
float-xl-right	float: right;
float-xl-start	float: start;
float-xl-end	float: end;
float-xl-none	float: none;

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.