v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Clearfix

Clear floated content within a container with the clearfix utility.

Page Contents

Overview #

Easily clear floats by adding .clearfix to the parent element. A detailed explanation of how the clearfix works is available.

Usage #

<div class="clearfix">...</div>

Can also be used as a mixin.

// Mixin itself
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}

// Usage as a mixin
.element {
@include clearfix();
}

Example #

The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout, as shown in the second part of the example.

With .clearfix
Without .clearfix
<!-- With .clearfix -->
<div class="bg-info clearfix">
<button type="button" class="btn float-start">Button floated to start</button>
<button type="button" class="btn float-end">Button floated to end</button>
</div>

<!-- Without .clearfix -->
<div class="bg-info">
<button type="button" class="btn float-start">Button floated to start</button>
<button type="button" class="btn float-end">Button floated to end</button>
</div>

SASS Reference #

Variables #

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

Name Type Default Description
$enable-utility-clearfix boolean true Enable the generation of the clearfix utility class.

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.

clearfix() #

Apply a clearfix to an element.

@include clearfix();

clearfix-disable() #

Disable the clearfix on an element.

@include clearfix-disable();