Stap 1 — Bootstrap koppelen (CDN)

We voegen Bootstrap toe via het CDN: eerst de CSS in de <head>, daarna de JS-bundle (inclusief Popper) net voor </body> of met defer.

1. CSS koppelen (in `<head>`)

Plaats deze link in de kop van je HTML. Laat hem boven je eigen custom.css staan.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous">

<!-- daarna je eigen CSS -->
<link rel="stylesheet" href="assets/css/custom.css">

Waarom die attributen?
integrity = extra veiligheidscheck (SRI). crossorigin hoort bij SRI zodat de check werkt.

2. JS-bundle toevoegen (met Popper)

Zet dit script onderaan de pagina of laad het met defer. Dit is nodig voor o.a. dropdowns en de burgerknop.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous" defer></script>

<!-- daarna je eigen scripts -->
<script src="assets/js/main.js" defer></script>

Meer info over scripts: scripts-defer-async

3. Sneltest (werkt Bootstrap?)

Plak dit blokje in de body om te controleren of CSS & JS actief zijn.

<div class="alert alert-success" role="alert">
  Bootstrap CSS laadt! 🎉
</div>

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demoCollapse">
  Test collapse
</button>
<div id="demoCollapse" class="collapse mt-2">
  <div class="border rounded p-3">JS-bundle werkt ook!</div>
</div>

Checklist

Bootstrap CSS staat in de <head>.
Je eigen custom.css staat na Bootstrap CSS.
Bootstrap JS-bundle is geladen (onderaan of met defer).
De testalert en de collapse werken.

Veelgemaakte fouten

Versies mixen: gebruik voor CSS en JS dezelfde Bootstrap-versie (hier: 5.3.3).
Volgorde: zet custom.css na Bootstrap, anders overschrijf je niets.
Bestandspad: controleer in DevTools → Network of je custom.css status 200 krijgt.