🛠️ Utility classes

⏱ Geschatte leestijd: 30 minuten · 7 stappen

Utility classes zijn kleine, eendoelige CSS-klassen. In plaats van een klasse te schrijven die padding en kleur en uitlijning regelt, gebruik je drie aparte klassen. Dit maakt Bootstrap razendsnel in de praktijk: je hoeft bijna nooit custom CSS te schrijven voor eenvoudige layouts.

1 Spacing — margin en padding

Het systeem

Spacing klassen volgen het patroon {eigenschap}{zijde}-{grootte}. Eigenschap: m (margin) of p (padding). Zijde: t top, b bottom, s start/links, e end/rechts, x horizontaal, y verticaal. Grootte: 0 t/m 5 (of auto).

Klasse	CSS equivalent	Waarde
m-3	margin: 1rem	16px
mt-4	margin-top: 1.5rem	24px
mb-2	margin-bottom: 0.5rem	8px
ms-3	margin-left: 1rem	16px
me-2	margin-right: 0.5rem	8px
mx-auto	margin-left/right: auto	centreer horizontaal
py-5	padding-top/bottom: 3rem	48px
px-3	padding-left/right: 1rem	16px

Spacing in de praktijk

<!-- Knop met ruimte rechts voor de volgende knop -->
<button class="btn btn-primary me-2">Opslaan</button>
<button class="btn btn-secondary">Annuleren</button>

<!-- Sectie met verticale padding -->
<section class="py-5">
  <div class="container">
    <h2 class="mb-3">Kop met margin-bottom</h2>
    <p class="mt-0">Paragraaf zonder marge bovenaan</p>
  </div>
</section>

🔗 CSS-link: m-3 = margin: 1rem, mt-4 = margin-top: 1.5rem. Bootstrap gebruikt een schaal van 0.25rem stappen: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem voor de waarden 0–5.

2 Kleuren — tekst en achtergrond

Bootstrap heeft een vaste set semantische kleuren: primary (blauw), secondary (grijs), success (groen), danger (rood), warning (geel), info (cyaan), light en dark. Je gebruikt ze met text- of bg-.

Kleur-utilities

<!-- Tekstkleur -->
<p class="text-primary">Blauw (primary)</p>
<p class="text-danger">Rood (danger)</p>
<p class="text-success">Groen (success)</p>
<p class="text-muted">Grijs (gedimde tekst)</p>

<!-- Achtergrondkleur + bijpassende tekstkleur -->
<div class="bg-primary text-white p-3">Blauw vlak</div>
<div class="bg-warning text-dark p-3">Geel vlak (donkere tekst!)</div>
<div class="bg-light text-dark p-3">Licht grijs vlak</div>

⚠️ Let op: bg-warning en bg-info zijn lichte kleuren — gebruik dan text-dark voor leesbaarheid. Bij bg-primary, bg-danger, etc. gebruik je text-white.

3 Display utilities — tonen, verbergen en flexbox

Bootstrap's display-utilities werken ook met breakpoints. Zo kun je elementen op mobiel verbergen maar op desktop tonen, of flexbox inschakelen zonder custom CSS.

Display utilities

<!-- Verbergen en tonen -->
<div class="d-none">Altijd verborgen</div>
<div class="d-none d-md-block">Verborgen op mobiel, zichtbaar vanaf md</div>
<div class="d-block d-lg-none">Zichtbaar op mobiel, verborgen vanaf lg</div>

<!-- Flexbox (je kent dit uit de CSS-track!) -->
<div class="d-flex justify-content-between align-items-center">
  <span>Links</span>
  <span>Rechts</span>
</div>

<!-- Flex met gap en wrap -->
<div class="d-flex flex-wrap gap-2">
  <button class="btn btn-sm btn-primary">A</button>
  <button class="btn btn-sm btn-secondary">B</button>
</div>

🔗 CSS-link: d-flex justify-content-between is exact display: flex; justify-content: space-between;. d-none d-md-block is display:none met een media query die op 768px omzet naar display:block. Alles wat je kent — Bootstrap heeft het als utility class.

4 Tekst-utilities

Tekst utilities

<!-- Uitlijning -->
<p class="text-start">Links uitgelijnd (standaard)</p>
<p class="text-center">Gecentreerd</p>
<p class="text-end">Rechts uitgelijnd</p>

<!-- Grootte en gewicht -->
<p class="fs-1">Heel groot (fs-1 = 2.5rem)</p>
<p class="fs-6">Klein (fs-6 = 1rem)</p>
<p class="fw-bold">Vet</p>
<p class="fw-light">Licht gewicht</p>
<p class="fst-italic">Cursief</p>

<!-- Afkappen met ellipsis -->
<p class="text-truncate" style="max-width:200px">
  Lange tekst die wordt afgekapt...
</p>

<!-- Lead tekst (grotere introtekst) -->
<p class="lead">Introductietekst iets groter dan normaal</p>

5 Borders, rounded en shadow

Borders, afgeronde hoeken en schaduwen

<!-- Borders -->
<div class="border">Alle kanten</div>
<div class="border-top">Alleen boven</div>
<div class="border border-primary">Gekleurde border</div>

<!-- Afgeronde hoeken -->
<img class="rounded" ...>          <!-- kleine radius -->
<img class="rounded-3" ...>        <!-- grotere radius -->
<img class="rounded-circle" ...>   <!-- perfect cirkel -->
<img class="rounded-pill" ...>     <!-- pill-vorm -->

<!-- Schaduwen -->
<div class="shadow-sm">Kleine schaduw</div>
<div class="shadow">Standaard schaduw</div>
<div class="shadow-lg">Grote schaduw</div>

6 Oefening 1: Utility classes combineren

Opdracht:

✓ Voeg py-5 toe aan de <section> (verticale padding)

✓ Geef de kop text-center en mb-4

✓ Geef de paragraaf text-muted en text-center

✓ Voeg d-flex gap-3 justify-content-center mt-4 toe aan de knoppenwrapper

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Utility oefening</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
  <section class="bg-light ???">
    <div class="container">
      <h2 class="???">Welkom bij Bootstrap</h2>
      <p class="lead ???">
        Bootstrap utilities maken je code sneller en leesbaarder.
      </p>
      <div class="???">
        <button class="btn btn-primary">Aan de slag</button>
        <button class="btn btn-outline-secondary">Meer info</button>
      </div>
    </div>
  </section>
</body>
</html>

Live preview

7 Oefening 2: Profielkaart met utilities

Opdracht: bouw deze profielkaart na met alleen utility classes

✓ Witte achtergrond (bg-white), schaduw (shadow), afgerond (rounded-3), padding (p-4)

✓ Avatar: een div met bg-primary rounded-circle d-flex align-items-center justify-content-center, breedte en hoogte 64px

✓ Naam in fw-bold fs-5 mt-3 mb-1

✓ Functie in text-muted small mb-3

✓ Knop: btn btn-primary btn-sm rounded-pill

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profielkaart</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body class="bg-light p-5">
  <div class="mx-auto text-center" style="max-width:220px">
    <!-- Kaart wrapper: bg-white, shadow, rounded-3, p-4 -->
    <div class="???">
      <!-- Avatar cirkel -->
      <div class="???" style="width:64px;height:64px;margin:0 auto">
        <span class="text-white fw-bold fs-4">JD</span>
      </div>
      <!-- Naam -->
      <p class="???">Jan de Vries</p>
      <!-- Functie -->
      <p class="???">Frontend Developer</p>
      <!-- Knop -->
      <button class="???">Profiel bekijken</button>
    </div>
  </div>
</body>
</html>

Live preview

Kennischeck

4 vragen — test je kennis van utility classes.

← Les 2: Grid Les 4: Componenten →

Bootstrap-track · Cheatsheet