Bootstrap Les 1: Wat is Bootstrap?

Home ›Bootstrap-track ›Les 1

🅱️ Wat is Bootstrap en hoe begin je

⏱ Geschatte leestijd: 25 minuten · 6 stappen

Je kent CSS — je weet hoe selectors werken, hoe het box model werkt en hoe flexbox layouts maakt. Bootstrap bouwt daarop voort: het is een grote verzameling kant-en-klare CSS-regels die je via één link toevoegt. In deze les leer je wat Bootstrap precies doet, hoe je het laadt via een CDN en bouw je je eerste werkende Bootstrap-pagina.

1 Wat is een CSS-framework?

Wat betekent dit?

Een CSS-framework is een verzameling kant-en-klare stijlregels die je in je project kunt gebruiken. In plaats van zelf alles te schrijven, voeg je de juiste class-namen toe aan je HTML en het framework doet de rest.

Stel je voor: je wil een mooie knop maken. In kale CSS zou je dit moeten schrijven:

✗ Kale CSS — veel werk

button {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
}
button:hover {
  background-color: #0b5ed7;
}

✓ Met Bootstrap — één regel HTML

<button class="btn btn-primary">
  Klik hier
</button>

Bootstrap levert die CSS al mee. Jij hoeft alleen de juiste class-naam te kennen.

Metafoor: LEGO vs plastic smelten

Kale CSS schrijven is als zelf plastic smelten en gieten om je eigen LEGO-blokken te maken. Bootstrap is een doos kant-en-klare LEGO-blokken — je pakt de stukken die je nodig hebt en bouwt er iets van. Je kunt nog steeds eigen stukken maken (custom CSS), maar je begint niet bij nul.

Voordelen en nadelen

Voordelen	Nadelen
✓ Snel resultaat — mooie UI in minuten	✗ "Bootstrap-look" — veel sites lijken op elkaar
✓ Responsive out-of-the-box	✗ Extra CSS die je misschien niet gebruikt
✓ Consistentie — alles past bij elkaar	✗ Minder controle over elk detail
✓ Grote community, veel documentatie	✗ Veel class-namen onthouden

Bootstrap 5 vs Bootstrap 4: we gebruiken Bootstrap 5 — de huidige stabiele versie. Bootstrap 4 lijkt er erg op, maar gebruikt nog jQuery als afhankelijkheid en heeft andere class-namen (bijv. mr- in plaats van me-). Wie Bootstrap 5 kent, kan Bootstrap 4 snel oppakken.

2 Bootstrap inladen via CDN

Wat betekent dit?

Een CDN (Content Delivery Network) is een server die bestanden wereldwijd snel levert. In plaats van Bootstrap te downloaden en in je project te zetten, link je rechtstreeks naar de CDN. Geen installatie, geen buildstap — gewoon een <link>-tag en je bent klaar.

Bootstrap bestaat uit twee onderdelen: de CSS (voor de opmaak) en de JavaScript (voor interactieve componenten zoals modals en dropdowns). De CSS laad je altijd — de JS heb je alleen nodig als je die componenten gebruikt.

Minimale Bootstrap-pagina

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mijn Bootstrap pagina</title>

  <!-- Bootstrap CSS — altijd in de <head> -->
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>

  <div class="container">
    <h1>Hallo Bootstrap!</h1>
    <button class="btn btn-primary">Klik mij</button>
  </div>

  <!-- Bootstrap JS — optioneel, vóór </body> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

viewport meta

Verplicht voor responsive design. Bootstrap's grid werkt niet correct zonder dit.

bootstrap.min.css

De CSS van Bootstrap — bevat alle klassen voor grid, componenten en utilities.

bootstrap.bundle.min.js

JS voor modals, dropdowns, accordions. "Bundle" bevat ook Popper.js — geen aparte imports nodig.

De `container`-klasse

Bijna elke Bootstrap-pagina begint met een container. Dit is een wrapper die je inhoud centreert en een maximale breedte geeft, afhankelijk van het scherm.

container — vaste maximale breedte

<!-- Inhoud wordt gecentreerd
     met padding aan de zijkanten -->
<div class="container">
  ...
</div>

container-fluid — volle breedte

<!-- Volle breedte,
     altijd 100% breed -->
<div class="container-fluid">
  ...
</div>

🔗 CSS-link: container is in kale CSS equivalent aan max-width: 1320px; margin: 0 auto; padding: 0 12px; — precies wat je in de CSS-track hebt geleerd voor het centreren van secties. Bootstrap doet dit voor je.

3 Bootstrap in actie — knoppen en tekst

Bekijk het verschil tussen een pagina zonder en met Bootstrap. Zelfde HTML, maar met Bootstrap-classes:

Zonder Bootstrap — kaal

Met Bootstrap — professioneel

De knop-klassen

Elke Bootstrap-knop heeft twee klassen: btn (de basisstijl) + een variant (btn-primary, btn-danger, etc.).

Bootstrap knop-varianten

<!-- Gevulde knoppen -->
<button class="btn btn-primary">Primair</button>
<button class="btn btn-secondary">Secundair</button>
<button class="btn btn-success">Succes</button>
<button class="btn btn-danger">Gevaarlijk</button>
<button class="btn btn-warning">Waarschuwing</button>

<!-- Omrande knoppen (outline) -->
<button class="btn btn-outline-primary">Primair outline</button>
<button class="btn btn-outline-danger">Gevaar outline</button>

<!-- Maten -->
<button class="btn btn-primary btn-lg">Groot</button>
<button class="btn btn-primary btn-sm">Klein</button>

Live preview

🔗 CSS-link: btn-primary stelt Bootstrap's blauwe kleur in (#0d6efd), met border-radius, padding en een hover-effect via transition. Dit is alles wat je in de CSS-track hebt geleerd — Bootstrap heeft het al voor je geschreven.

4 Oefening 1: Voeg Bootstrap-classes toe

Opdracht:

Bootstrap is al ingeladen. Voeg de juiste klassen toe:

✓ Wikkel de inhoud in een container

✓ Maak de eerste knop btn btn-primary

✓ Maak de tweede knop btn btn-outline-danger

✓ Maak de derde knop btn btn-success btn-lg

editor — voeg classes toe aan de juiste elementen

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oefening 1</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="???">
    <h1>Mijn Bootstrap pagina</h1>
    <p>Bootstrap maakt bouwen snel en eenvoudig.</p>
    <button class="???">Opslaan</button>
    <button class="???">Verwijderen</button>
    <button class="???">Doorgaan</button>
  </div>
</body>
</html>

Live preview

5 Oefening 2: Bouw je eerste Bootstrap-pagina

Opdracht:

Schrijf een complete Bootstrap-pagina vanuit het skelet:

✓ Bootstrap CDN al ingeladen — voeg de juiste class-namen toe

✓ Gebruik container als wrapper

✓ Voeg minstens 4 knoppen toe met verschillende varianten

✓ Voeg text-muted toe aan de paragraaf

✓ Gebruik me-2 (margin-end: ruimte rechts) tussen knoppen

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mijn eerste Bootstrap pagina</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Voeg hier je Bootstrap-klassen toe -->
  <div>
    <h1>Mijn Bootstrap pagina</h1>
    <p>Bootstrap maakt het bouwen van mooie interfaces snel.</p>
    <!-- Voeg hier 4 knoppen toe met verschillende varianten -->

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

Live preview

6 Kennischeck

4 vragen — test je begrip van deze les.

← Alle tracks Les 2: Grid →

Bootstrap-track · Cheatsheet

🅱️ Wat is Bootstrap en hoe begin je

1 Wat is een CSS-framework?

Metafoor: LEGO vs plastic smelten

Voordelen en nadelen

2 Bootstrap inladen via CDN

De container-klasse

3 Bootstrap in actie — knoppen en tekst

De knop-klassen

4 Oefening 1: Voeg Bootstrap-classes toe

5 Oefening 2: Bouw je eerste Bootstrap-pagina

6 Kennischeck

De `container`-klasse