🔲 Het grid systeem

⏱ Geschatte leestijd: 30 minuten · 7 stappen

Het Bootstrap-grid is het hart van het framework — het is hoe je layouts bouwt die op elk scherm goed werken. Het systeem werkt met drie lagen: container → row → col. In deze les leer je hoe de 12 kolommen werken, hoe je breakpoints instelt en wat gutters zijn.

1 De drie lagen: container → row → col

Wat betekent dit?

Bootstrap's grid deelt de breedte van een pagina op in 12 gelijke kolommen. Jij bepaalt hoeveel kolommen elk element inneemt. col-6 = de helft (6 van de 12), col-4 = een derde, col-3 = een kwart.

Elke grid-layout volgt altijd dezelfde structuur:

De drie lagen — altijd in deze volgorde

<div class="container">     <!-- 1. Centreert en begrenst -->
  <div class="row">          <!-- 2. Een rij van 12 kolommen -->
    <div class="col-6">      <!-- 3. Neemt 6/12 = helft breedte -->
      Linkerkolom
    </div>
    <div class="col-6">      <!-- 3. Neemt de andere 6/12 -->
      Rechterkolom
    </div>
  </div>
</div>

Live — twee gelijke kolommen

🔗 CSS-link: Bootstrap's grid is gebouwd op CSS Flexbox. row is display: flex; flex-wrap: wrap; en col-6 is flex: 0 0 50%; max-width: 50%;. Je herkent dit van de CSS-track — Bootstrap heeft het voor jou uitgewerkt voor alle 12 stappen.

2 Kolom-breedtes — de 12 stappen

Je kunt elke waarde van 1 t/m 12 gebruiken. De kolommen in een row moeten optellen tot 12 (anders loopt een kolom naar de volgende rij). Gebruik je alleen col zonder getal, verdeelt Bootstrap de ruimte automatisch gelijk.

Veelgebruikte kolom-combinaties

<!-- Twee gelijke kolommen (6+6=12) -->
<div class="row">
  <div class="col-6">Helft</div>
  <div class="col-6">Helft</div>
</div>

<!-- Drie gelijke kolommen (4+4+4=12) -->
<div class="row">
  <div class="col-4">Derde</div>
  <div class="col-4">Derde</div>
  <div class="col-4">Derde</div>
</div>

<!-- Automatische gelijke verdeling met col -->
<div class="row">
  <div class="col">Auto</div>
  <div class="col">Auto</div>
  <div class="col">Auto</div>
</div>

<!-- Asymmetrisch: sidebar + inhoud (3+9=12) -->
<div class="row">
  <div class="col-3">Sidebar</div>
  <div class="col-9">Hoofdinhoud</div>
</div>

3 Breakpoints — responsive kolommen

Wat betekent dit?

Een breakpoint is de schermbreedte waarop een layout verandert. Bootstrap werkt mobile-first: je begint met de mobiele layout en bepaalt dan hoe het eruitziet op grotere schermen.

Prefix	Naam	Schermformaat	Typisch gebruik
col-	Extra small	< 576px	Altijd actief (mobiel)
col-sm-	Small	≥ 576px	Grote telefoons
col-md-	Medium	≥ 768px	Tablets
col-lg-	Large	≥ 992px	Laptops
col-xl-	Extra large	≥ 1200px	Desktops
col-xxl-	Extra extra large	≥ 1400px	Brede schermen

Je combineert meerdere breakpoints op één element. Het werkt altijd mobile-first: de kleinste specificatie geldt totdat de volgende breakpoint bereikt is.

Responsive kolom — drie breakpoints gecombineerd

<div class="row">
  <!-- Mobiel: volledig breed
       Tablet (md): half breed
       Desktop (lg): een derde -->
  <div class="col-12 col-md-6 col-lg-4">
    Kaart
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    Kaart
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    Kaart
  </div>
</div>

🔗 CSS-link: dit is precies de mobile-first aanpak uit de CSS-track (les 8). In kale CSS schrijf je @media (min-width: 768px) { .col { width: 50%; } }. Bootstrap doet dit voor alle 12 kolombreedtes en alle 5 breakpoints — dat zijn 60 media queries die je niet hoeft te schrijven.

4 Gutters — ruimte tussen kolommen

Gutters zijn de ruimtes tussen kolommen. Bootstrap voegt ze toe via padding op de kolommen en negatieve margin op de rij. Je beheert ze met g-, gx- (horizontaal) en gy- (verticaal) klassen op de row.

Gutters instellen

<!-- Geen gutter -->
<div class="row g-0"> ... </div>

<!-- Kleine gutter (8px) -->
<div class="row g-2"> ... </div>

<!-- Standaard gutter (16px) -->
<div class="row g-3"> ... </div>

<!-- Grotere gutter (24px) -->
<div class="row g-4"> ... </div>

<!-- Alleen horizontaal (gx) of verticaal (gy) -->
<div class="row gx-5 gy-2"> ... </div>

5 Nesting — grid in grid

Je kunt een row plaatsen binnen een kolom. De geneste rij heeft ook weer 12 kolommen — maar dan relatief aan de breedte van de bovenliggende kolom.

Geneste grid

<div class="container">
  <div class="row">
    <div class="col-8">
      Hoofdinhoud (8/12)
      <!-- Geneste rij binnen de 8-kolom -->
      <div class="row mt-3">
        <div class="col-6">Half van de 8-kolom</div>
        <div class="col-6">Half van de 8-kolom</div>
      </div>
    </div>
    <div class="col-4">Sidebar (4/12)</div>
  </div>
</div>

6 Oefening 1: Bouw een drie-koloms grid

Opdracht:

✓ Gebruik container, row en col- klassen

✓ Eerste rij: twee gelijke kolommen (col-6)

✓ Tweede rij: drie gelijke kolommen (col-4)

✓ Voeg g-3 toe aan elke row voor ruimte

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid oefening</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body class="p-3">
  <div class="???">

    <!-- Rij 1: twee gelijke kolommen -->
    <div class="??? ???">
      <div class="???">
        <div class="bg-primary text-white p-3 text-center rounded">Kolom A</div>
      </div>
      <div class="???">
        <div class="bg-secondary text-white p-3 text-center rounded">Kolom B</div>
      </div>
    </div>

    <!-- Rij 2: drie gelijke kolommen -->
    <div class="??? ???">
      <div class="???"><div class="bg-success text-white p-3 text-center rounded">1</div></div>
      <div class="???"><div class="bg-danger text-white p-3 text-center rounded">2</div></div>
      <div class="???"><div class="bg-warning text-dark p-3 text-center rounded">3</div></div>
    </div>

  </div>
</body>
</html>

Live preview

7 Oefening 2: Responsive grid met breakpoints

Opdracht:

✓ Bouw een rij met 3 kaarten

✓ Mobiel: elke kaart volledig breed (col-12)

✓ Tablet en groter: twee naast elkaar (col-md-6)

✓ Desktop en groter: drie naast elkaar (col-lg-4)

✓ Voeg g-3 toe voor witruimte

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive grid</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body class="p-3">
  <div class="container">
    <div class="row ???">
      <!-- Elke kaart: mobiel vol, tablet half, desktop derde -->
      <div class="??? ??? ???">
        <div class="bg-primary text-white p-4 rounded text-center">Kaart 1</div>
      </div>
      <div class="??? ??? ???">
        <div class="bg-secondary text-white p-4 rounded text-center">Kaart 2</div>
      </div>
      <div class="??? ??? ???">
        <div class="bg-success text-white p-4 rounded text-center">Kaart 3</div>
      </div>
    </div>
  </div>
</body>
</html>

Live preview — verklein dit venster om het responsive gedrag te zien

Kennischeck

4 vragen — test je begrip van het Bootstrap-grid.

← Les 1: Wat is Bootstrap? Les 3: Utility classes →

Bootstrap-track · Cheatsheet