Bootstrap 5.2 / Layout

Grid-systeem

Gebruik ons krachtige mobile-first flexbox-grid om layouts in alle soorten en maten te bouwen, dankzij een systeem met twaalf kolommen, zes standaard responsieve tiers, Sass-variabelen en -mixins, en tientallen vooraf gedefinieerde klassen.

Voorbeeld

Het grid-systeem van Bootstrap gebruikt een reeks containers, rijen en kolommen om content op te maken en uit te lijnen. Het is gebouwd met flexbox en volledig responsief. Hieronder vind je een voorbeeld en een uitgebreide uitleg over hoe het grid-systeem in elkaar zit.

Let op

Nieuw met of onbekend met flexbox? Lees deze flexbox-gids van CSS Tricks voor achtergrond, terminologie, richtlijnen en codefragmenten.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      Kolom
    </div>
    <div class="col">
      Kolom
    </div>
    <div class="col">
      Kolom
    </div>
  </div>
</div>

Bovenstaand voorbeeld maakt met onze vooraf gedefinieerde grid-klassen drie even brede kolommen op alle apparaten en viewports. Die kolommen worden met de bovenliggende .container op de pagina gecentreerd.

Hoe het werkt

Uiteengerafeld zit het grid-systeem als volgt in elkaar:

Ons grid ondersteunt zes responsieve breakpoints. Breakpoints zijn gebaseerd op min-width-media queries, wat betekent dat ze gelden voor dat breakpoint en alle breakpoints erboven (zo geldt .col-sm-4 voor sm, md, lg, xl en xxl). Daardoor kun je de afmetingen en het gedrag van containers en kolommen per breakpoint bepalen.
Containers centreren je content en voorzien die horizontaal van padding. Gebruik .container voor een responsieve breedte in pixels, .container-fluid voor width: 100% op alle viewports en apparaten, of een responsieve container (bijv. .container-md) voor een combinatie van fluid en pixelbreedtes.
Rijen zijn wrappers voor kolommen. Elke kolom heeft horizontale padding (een gutter genoemd) om de ruimte ertussen te bepalen. Die padding wordt vervolgens op de rijen gecompenseerd met negatieve marges, zodat de content in je kolommen aan de linkerkant visueel uitlijnt. Rijen ondersteunen ook modifier-klassen om kolomafmetingen uniform toe te passen en gutter-klassen om de tussenruimte van je content te wijzigen.
Kolommen zijn ongelooflijk flexibel. Er zijn per rij 12 template-kolommen beschikbaar, waarmee je verschillende combinaties van elementen kunt maken die een willekeurig aantal kolommen beslaan. Kolomklassen geven aan hoeveel template-kolommen worden overspannen (zo beslaat col-4 er vier). widths worden in percentages ingesteld, zodat je altijd dezelfde relatieve verhoudingen hebt.
Gutters zijn ook responsief en aanpasbaar. Gutter-klassen zijn beschikbaar op alle breakpoints, met dezelfde formaten als onze margin- en padding-spacing. Wijzig horizontale gutters met .gx-*-klassen, verticale gutters met .gy-*, of alle gutters met .g-*-klassen. Ook .g-0 is beschikbaar om gutters te verwijderen.
Sass-variabelen, -maps en -mixins vormen de motor van het grid. Als je de vooraf gedefinieerde grid-klassen in Bootstrap niet wilt gebruiken, kun je de Sass-broncode van ons grid gebruiken om met semantischere markup je eigen variant te maken. We voegen ook een aantal CSS custom properties toe die deze Sass-variabelen benutten, voor nog meer flexibiliteit.

Houd rekening met de beperkingen en bugs rond flexbox, zoals de onmogelijkheid om sommige HTML-elementen als flex-container te gebruiken.

Grid-opties

Het grid-systeem van Bootstrap kan zich aanpassen aan alle zes standaard breakpoints, plus alle breakpoints die je zelf instelt. De zes standaard grid tiers zijn:

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

Zoals hierboven vermeld heeft elk van deze breakpoints een eigen container, een unieke klasseprefix en eigen modifiers. Zo verandert het grid over deze breakpoints heen:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	Geen (auto)	540px	720px	960px	1140px	1320px
Klasseprefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Aantal kolommen	12
Gutterbreedte	1.5rem (.75rem links en rechts)
Eigen gutters	Ja
Nestbaar	Ja
Kolomvolgorde	Ja

Auto-layout-kolommen

Gebruik breakpoint-specifieke kolomklassen om kolommen eenvoudig af te meten zonder een expliciete genummerde klasse zoals .col-sm-6.

Gelijke breedte

Hieronder staan bijvoorbeeld twee grid-layouts die op elk apparaat en elke viewport gelden, van xs tot xxl. Voeg voor elk gewenst breakpoint een willekeurig aantal klassen zonder getal toe en elke kolom krijgt dezelfde breedte.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 van 2
    </div>
    <div class="col">
      2 van 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 van 3
    </div>
    <div class="col">
      2 van 3
    </div>
    <div class="col">
      3 van 3
    </div>
  </div>
</div>

De breedte van één kolom instellen

Auto-layout voor flexbox-grid-kolommen betekent ook dat je de breedte van één kolom kunt instellen en de aangrenzende kolommen zich daar automatisch omheen laten aanpassen. Je kunt vooraf gedefinieerde grid-klassen gebruiken (zoals hieronder getoond), grid-mixins of inline breedtes. Let op: de andere kolommen passen zich aan, ongeacht de breedte van de middelste kolom.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 van 3
    </div>
    <div class="col-6">
      2 van 3 (breder)
    </div>
    <div class="col">
      3 van 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 van 3
    </div>
    <div class="col-5">
      2 van 3 (breder)
    </div>
    <div class="col">
      3 van 3
    </div>
  </div>
</div>

Content met variabele breedte

Gebruik col-{breakpoint}-auto-klassen om kolommen af te meten op basis van de natuurlijke breedte van hun content.

HTML

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 van 3
    </div>
    <div class="col-md-auto">
      Content met variabele breedte
    </div>
    <div class="col col-lg-2">
      3 van 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 van 3
    </div>
    <div class="col-md-auto">
      Content met variabele breedte
    </div>
    <div class="col col-lg-2">
      3 van 3
    </div>
  </div>
</div>

Responsieve klassen

Het grid van Bootstrap bevat zes tiers met vooraf gedefinieerde klassen om complexe responsieve layouts te bouwen. Bepaal zelf hoe groot je kolommen zijn op extra small-, small-, medium-, large- of extra large-apparaten.

Alle breakpoints

Gebruik voor grids die van de kleinste tot de grootste apparaten hetzelfde zijn de .col- en .col-*-klassen. Geef een genummerde klasse op wanneer je een kolom met een specifieke breedte nodig hebt; anders kun je gerust bij .col blijven.

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Van gestapeld naar horizontaal

Met één set .col-sm-*-klassen kun je een eenvoudig grid-systeem maken dat gestapeld begint en horizontaal wordt vanaf het small-breakpoint (sm).

HTML

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

Combineren

Wil je niet dat je kolommen in bepaalde grid tiers gewoon stapelen? Gebruik dan naar behoefte een combinatie van verschillende klassen per tier. Bekijk het onderstaande voorbeeld voor een beter beeld van hoe het allemaal werkt.

HTML

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Row columns

Gebruik de responsieve .row-cols-*-klassen om snel het aantal kolommen in te stellen waarmee je content en layout het best tot hun recht komen. Waar gewone .col-*-klassen op de individuele kolommen worden toegepast (bijv. .col-md-4), worden de row columns-klassen als snelkoppeling op de bovenliggende .row gezet. Met .row-cols-auto geef je de kolommen hun natuurlijke breedte.

Gebruik deze row columns-klassen om snel eenvoudige grid-layouts te maken of je card-layouts te sturen.

HTML

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col-6">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

HTML

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
    <div class="col">Kolom</div>
  </div>
</div>

Je kunt ook de bijbehorende Sass-mixin row-cols() gebruiken:

SCSS

.element {
  // Om te beginnen drie kolommen
  @include row-cols(3);

  // Vijf kolommen vanaf het medium breakpoint
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Nesten

Om je content met het standaard grid te nesten, voeg je binnen een bestaande .col-sm-*-kolom een nieuwe .row en een set .col-sm-*-kolommen toe. Geneste rijen moeten een set kolommen bevatten die samen op 12 of minder uitkomen (het is niet verplicht om alle 12 beschikbare kolommen te gebruiken).

HTML

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Niveau 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Niveau 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Niveau 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Wanneer je de Sass-bronbestanden van Bootstrap gebruikt, heb je de mogelijkheid om met Sass-variabelen en -mixins eigen, semantische en responsieve paginalayouts te maken. Onze vooraf gedefinieerde grid-klassen gebruiken diezelfde variabelen en mixins om een compleet pakket kant-en-klare klassen voor snelle responsieve layouts te bieden.

Variabelen

Variabelen en maps bepalen het aantal kolommen, de gutterbreedte en het media query-punt waarop kolommen gaan floaten. We gebruiken ze om de hierboven gedocumenteerde vooraf gedefinieerde grid-klassen te genereren, evenals voor de eigen mixins die hieronder staan.

SCSS

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

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

Mixins

Mixins worden samen met de grid-variabelen gebruikt om semantische CSS voor individuele grid-kolommen te genereren.

SCSS

// Maakt een wrapper voor een reeks kolommen
@include make-row();

// Maakt het element grid-klaar (past alles toe behalve de breedte)
@include make-col-ready();

// Zonder optionele size-waarden maakt de mixin gelijke kolommen (vergelijkbaar met .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Verschuiven met marges
@include make-col-offset($size, $columns: $grid-columns);

Voorbeeldgebruik

Je kunt de variabelen naar je eigen waarden aanpassen, of gewoon de mixins met hun standaardwaarden gebruiken. Hier is een voorbeeld waarin we met de standaardinstellingen een layout met twee kolommen en tussenruimte maken.

SCSS

.example-container {
  @include make-container();
  // Definieer deze breedte na de mixin om de door
  // `make-container()` gegenereerde `width: 100%` te overschrijven
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

HTML

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Hoofdcontent</div>
    <div class="example-content-secondary">Secundaire content</div>
  </div>
</div>

Het grid aanpassen

Met onze ingebouwde grid-Sass-variabelen en -maps kun je de vooraf gedefinieerde grid-klassen volledig naar wens aanpassen. Wijzig het aantal tiers, de media query-afmetingen en de containerbreedtes — en compileer daarna opnieuw.

Kolommen en gutters

Het aantal grid-kolommen kan via Sass-variabelen worden aangepast. $grid-columns wordt gebruikt om de breedtes (in procenten) van elke afzonderlijke kolom te genereren, terwijl $grid-gutter-width de breedte van de kolomgutters bepaalt. $grid-row-columns bepaalt het maximale aantal kolommen van .row-cols-*; elk getal boven deze limiet wordt genegeerd.

SCSS

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Grid tiers

Behalve de kolommen zelf kun je ook het aantal grid tiers aanpassen. Wil je bijvoorbeeld maar vier grid tiers, dan pas je $grid-breakpoints en $container-max-widths aan naar iets als dit:

SCSS

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wanneer je wijzigingen aanbrengt in de Sass-variabelen of -maps, moet je je wijzigingen opslaan en opnieuw compileren. Daarmee wordt een gloednieuwe set vooraf gedefinieerde grid-klassen voor kolombreedtes, offsets en volgorde gegenereerd. Ook responsieve zichtbaarheids-utilities worden bijgewerkt om de eigen breakpoints te gebruiken. Zorg dat je grid-waarden in px instelt (niet in rem, em of %).