Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations.
Easily clear float
s by adding .clearfix
to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// 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.
<div class="bg-info clearfix">
<button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
<button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
</div>