Float

Overzicht

Deze utility-klassen laten een element naar links of rechts floaten, of schakelen floaten uit, op basis van het huidige viewportformaat en met behulp van de CSS-eigenschap float. !important is toegevoegd om specificiteitsproblemen te voorkomen. Ze gebruiken dezelfde viewport-breakpoints als ons grid-systeem. Let op: float-utilities hebben geen effect op flex-items.

<div class="float-start">Float start op alle viewportformaten</div><br>
<div class="float-end">Float end op alle viewportformaten</div><br>
<div class="float-none">Niet floaten op alle viewportformaten</div>

Responsief

Er bestaan ook responsieve varianten voor elke float-waarde.

<div class="float-sm-start">Float start op viewports van formaat SM (small) of breder</div><br>
<div class="float-md-start">Float start op viewports van formaat MD (medium) of breder</div><br>
<div class="float-lg-start">Float start op viewports van formaat LG (large) of breder</div><br>
<div class="float-xl-start">Float start op viewports van formaat XL (extra-large) of breder</div><br>

Dit zijn alle ondersteunde klassen:

• .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 worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.