Clearfix

Maak floats eenvoudig vrij door .clearfix aan het bovenliggende element toe te voegen. Kan ook als mixin worden gebruikt.

Gebruik in HTML:

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

De broncode van de mixin:

Standaardwaarden: zie scss/mixins/_clearfix.scss in de Bootstrap-broncode.

Gebruik de mixin in SCSS:

.element {
  @include clearfix;
}

Het volgende voorbeeld laat zien hoe de clearfix kan worden gebruikt. Zonder de clearfix zou de omhullende div zich niet om de knoppen heen uitstrekken, wat een kapotte layout zou veroorzaken.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Voorbeeldknop links gefloat</button>
  <button type="button" class="btn btn-secondary float-end">Voorbeeldknop rechts gefloat</button>
</div>