Bootstrap 5.2 / Layout

Kolommen

Leer hoe je kolommen aanpast met een handvol opties voor uitlijning, volgorde en offsets, dankzij ons flexbox-grid-systeem. Zie bovendien hoe je kolomklassen gebruikt om de breedte van niet-grid-elementen te beheren.

Let op

Let op! Lees eerst de Grid-pagina voordat je je verdiept in het aanpassen en personaliseren van je grid-kolommen.

Hoe ze werken

Kolommen bouwen voort op de flexbox-architectuur van het grid. Flexbox betekent dat we opties hebben om individuele kolommen te wijzigen en groepen kolommen op rijniveau aan te passen. Jij bepaalt hoe kolommen groeien, krimpen of anderszins veranderen.
Bij het bouwen van grid-layouts gaat alle content in kolommen. De hiërarchie van het grid van Bootstrap loopt van container naar rij naar kolom naar jouw content. In zeldzame gevallen kun je content en kolom combineren, maar houd er rekening mee dat dit onbedoelde gevolgen kan hebben.
Bootstrap bevat vooraf gedefinieerde klassen om snel responsieve layouts te maken. Met zes breakpoints en twaalf kolommen per grid tier hebben we tientallen klassen al voor je klaarstaan om de gewenste layouts te maken. Dit kan desgewenst via Sass worden uitgeschakeld.

Uitlijning

Gebruik flexbox-uitlijningsutilities om kolommen verticaal en horizontaal uit te lijnen.

Verticale uitlijning

HTML

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
    <div class="col">
      Een van drie kolommen
    </div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      Een van drie kolommen
    </div>
    <div class="col align-self-center">
      Een van drie kolommen
    </div>
    <div class="col align-self-end">
      Een van drie kolommen
    </div>
  </div>
</div>

Horizontale uitlijning

HTML

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      Een van twee kolommen
    </div>
    <div class="col-4">
      Een van twee kolommen
    </div>
  </div>
</div>

Kolommen laten omslaan

Als er meer dan 12 kolommen binnen één rij worden geplaatst, slaat elke groep extra kolommen als één geheel om naar een nieuwe regel.

HTML

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Omdat 9 + 4 = 13 &gt; 12, slaat deze 4 kolommen brede div als één aaneengesloten geheel om naar een nieuwe regel.</div>
    <div class="col-6">.col-6<br>Volgende kolommen gaan verder op de nieuwe regel.</div>
  </div>
</div>

Kolomonderbrekingen

Kolommen naar een nieuwe regel laten breken vereist in flexbox een kleine truc: voeg een element met width: 100% toe op de plek waar je je kolommen naar een nieuwe regel wilt laten omslaan. Normaal gesproken doe je dit met meerdere .rows, maar niet elke implementatiemethode kan daar rekening mee houden.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Je kunt deze onderbreking ook op specifieke breakpoints toepassen met onze responsieve display-utilities.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Volgorde aanpassen

Order-klassen

Gebruik .order--klassen om de visuele volgorde van je content te bepalen. Deze klassen zijn responsief, dus je kunt de order per breakpoint instellen (bijv. .order-1.order-md-2). Bevat ondersteuning voor 1 tot en met 5 op alle zes grid tiers.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      Eerste in de DOM, geen order toegepast
    </div>
    <div class="col order-5">
      Tweede in de DOM, met een hogere order
    </div>
    <div class="col order-1">
      Derde in de DOM, met een order van 1
    </div>
  </div>
</div>

Er zijn ook responsieve .order-first- en .order-last-klassen die de order van een element wijzigen door respectievelijk order: -1 en order: 6 toe te passen. Deze klassen kunnen naar behoefte ook gecombineerd worden met de genummerde .order-*-klassen.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      Eerste in de DOM, als laatste geordend
    </div>
    <div class="col">
      Tweede in de DOM, niet geordend
    </div>
    <div class="col order-first">
      Derde in de DOM, als eerste geordend
    </div>
  </div>
</div>

Kolommen verschuiven

Je kunt grid-kolommen op twee manieren verschuiven: met onze responsieve .offset--grid-klassen en met onze margin-utilities. Grid-klassen hebben afmetingen die overeenkomen met kolommen, terwijl marges handiger zijn voor snelle layouts waarbij de breedte van de verschuiving variabel is.

Offset-klassen

Verplaats kolommen naar rechts met .offset-md-*-klassen. Deze klassen vergroten de linkermarge van een kolom met * kolommen. Zo verplaatst .offset-md-4 een .col-md-4 vier kolommen op.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Naast het vrijmaken van kolommen op responsieve breakpoints moet je mogelijk ook offsets resetten. Zie dit in actie in het grid-voorbeeld.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin-utilities

Met de overstap naar flexbox in v4 kun je margin-utilities zoals .me-auto gebruiken om aangrenzende kolommen van elkaar weg te duwen.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Losstaande kolomklassen

De .col-*-klassen kunnen ook buiten een .row worden gebruikt om een element een specifieke breedte te geven. Wanneer kolomklassen worden gebruikt als niet-directe kinderen van een rij, wordt de padding weggelaten.

HTML

<div class="col-3 bg-light p-3 border">
  .col-3: breedte van 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: breedte van 75% boven het sm-breakpoint
</div>

De klassen kunnen samen met utilities worden gebruikt om responsieve gefloate afbeeldingen te maken. Zorg dat je de content in een .clearfix-wrapper zet om de float vrij te maken als de tekst korter is.

HTML

<div class="clearfix">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20210%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Responsive%20floated%20image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EResponsive%20floated%20image%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" alt="Responsive floated image">

  <p>
    Een alinea met opvultekst. We gebruiken hem hier om het gebruik van de clearfix-klasse te laten zien. We voegen hier nogal wat nietszeggende zinnen toe om te demonstreren hoe de kolommen hier samenwerken met de gefloate afbeelding.
  </p>

  <p>
    Zoals je ziet lopen de alinea's netjes om de gefloate afbeelding heen. Stel je nu eens voor hoe dit eruit zou zien met echte content, in plaats van alleen deze saaie opvultekst die maar doorgaat en doorgaat, maar eigenlijk geen enkele concrete informatie overbrengt. Hij neemt simpelweg ruimte in en hoort eigenlijk niet gelezen te worden.
  </p>

  <p>
    En toch ben je hier, nog steeds volhardend in het lezen van deze opvultekst, in de hoop op meer inzichten of een verborgen easter egg. Een grap, misschien. Helaas, daar is hier niets van te vinden.
  </p>
</div>