Float

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Overview #

Using the CSS float property, these utility classes use the current viewport size to float an element to the left, right, or deactivate floating. Important is mentioned to prevent issues with specificity. The grid system uses the same viewport breakpoints that these do. Please be mindful that flex objects are unaffected by float utilities.

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

RESULT

Responsive #

Responsive variations also exist for each float value.

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

RESULT

Here are all the support classes:

• .float-start
• .float-end
• .float-none
• .float-sm-start
• .float-sm-end
• .float-sm-none
• .float-md-start
• .float-md-end
• .float-md-none
• .float-lg-start
• .float-lg-end
• .float-lg-none
• .float-xl-start
• .float-xl-end
• .float-xl-none
• .float-xxl-start
• .float-xxl-end
• .float-xxl-none

Sass #

Utilities API #

Float utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),