Floating

Overview

These utility classes float an element to the enable or disable floating, based on the current viewport size using the CSS float property.

Usage

Note that the float utilities do not have any affect on items inside flex container. Please refer to the flexbox specification for details.

Instead of using left/right designators, the float utilities use start/end designators to match up with the flexbox utilities.

Use the clearfix utility on a parent element to clear floats.

<div class="float-start">Float start aligned on all viewport sizes</div><br>
<div class="float-end">Float end aligned on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>

<div class="float-sm-end">Float end aligned on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end aligned on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end aligned on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end aligned on viewports sized XL (extra-large) or wider</div><br>

// Related simple non-responsive mixins
.element {
  @include float-start;
}
.another-element {
  @include float-end;
}
.unfloated-element {
  @include float-none;
}

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Mixins

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

float-start()

Apply a float to the 'start' side.

@include float-start();

float-end()

Apply a float to the 'end' side.

@include float-end();

float-none()

Disable float.

@include float-none();