Skip to main content
v4 Beta now available! Try it out!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Clearfix

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

<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;
}

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>