Float

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

<PageFeatures />

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; { style="max-height: 420px;" fixed-header }

<PromotedEntry /> <FeaturesBreakpointsTable />

Usage

Float utility classes apply floating based upon the current viewport size using the CSS float property.

Classes

Easily toggle a float with a class:

<ExamplesExample file="float/classes" />

Responsive

Floats can also be applied on a per breakpoint (viewport) basis.

<ExamplesExample file="float/responsive" />