🃏 Componenten 1: knoppen, alerts, badges en cards
⏱ Geschatte leestijd: 30 minuten · 7 stappen
Bootstrap-componenten zijn herbruikbare UI-blokken met vaste HTML-structuur en klassen. Je hoeft niet zelf te bedenken hoe een knop of kaart eruitziet — je kopieert de structuur en past de inhoud aan. In deze les leer je de vier meest gebruikte componenten.
1 Knoppen — alle varianten
Je kent de basis al van les 1. Hier zijn alle varianten en speciale opties:
<!-- Gevuld -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning text-dark">Warning</button>
<button class="btn btn-info text-dark">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<!-- Outline (transparante achtergrond) -->
<button class="btn btn-outline-primary">Outline Primary</button>
<!-- Maten -->
<button class="btn btn-primary btn-lg">Groot</button>
<button class="btn btn-primary btn-sm">Klein</button>
<!-- Speciale opties -->
<button class="btn btn-primary w-100">Volle breedte</button>
<button class="btn btn-primary" disabled>Uitgeschakeld</button>
<!-- Als link opmaken als knop: -->
<a href="#" class="btn btn-primary">Link als knop</a>2 Alerts — foutmeldingen en feedback
Wat betekent dit?
Een alert is een gekleurd blok dat een bericht toont aan de gebruiker — een foutmelding, bevestiging of waarschuwing. Ze zijn gebaseerd op dezelfde kleurset als knoppen.
<!-- Basis alert -->
<div class="alert alert-success">
✓ Opgeslagen! Je wijzigingen zijn bewaard.
</div>
<div class="alert alert-danger">
✗ Er is iets fout gegaan. Probeer het opnieuw.
</div>
<div class="alert alert-warning">
⚠ Je sessie verloopt over 5 minuten.
</div>
<div class="alert alert-info">
ℹ Onderhoud gepland voor zaterdag 22:00.
</div>
<!-- Alert met sluitknop (vereist Bootstrap JS) -->
<div class="alert alert-success alert-dismissible fade show">
Opgeslagen!
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>⚡ Komt terug in Symfony
In Symfony gebruik je flash messages voor feedback na een formuliersubmissie. Met Bootstrap alerts toon je die berichten: alert alert-success voor app.flashes('success') en alert alert-danger voor fouten. Dit is een vast patroon in Symfony + Bootstrap projecten.
3 Badges — labels en tellers
Badges zijn kleine inline labels — ideaal voor status-aanduiding, tellers of categorielabels. Ze schalen automatisch mee met de omringende tekst.
<!-- Inline badge naast tekst -->
<h2>Berichten <span class="badge bg-danger">4</span></h2>
<!-- Statussen -->
<span class="badge bg-success">Actief</span>
<span class="badge bg-warning text-dark">In behandeling</span>
<span class="badge bg-secondary">Gesloten</span>
<!-- Pill-vorm (afgerond) -->
<span class="badge rounded-pill bg-primary">Nieuw</span>
<!-- Badge op een knop -->
<button class="btn btn-primary">
Winkelwagen <span class="badge bg-danger ms-1">3</span>
</button>4 Cards — de meest gebruikte component
Wat betekent dit?
Een card is een flexibele container met optionele header, body, footer, afbeelding en actielinks. Het is de bootstrap voor het weergeven van een item uit een lijst — een product, blogpost, gebruiker, etc.
<div class="card">
<!-- Optioneel: afbeelding bovenaan -->
<img src="foto.jpg" class="card-img-top" alt="...">
<!-- Verplicht: card-body voor de inhoud -->
<div class="card-body">
<h5 class="card-title">Productnaam</h5>
<p class="card-text text-muted">Korte beschrijving.</p>
<a href="#" class="btn btn-primary">Bekijken</a>
</div>
<!-- Optioneel: footer met meta-info -->
<div class="card-footer text-muted small">
Geplaatst: 20 mei 2026
</div>
</div>5 Card-grid — kaarten in een grid
Kaarten combineer je met het grid uit les 2. Voeg h-100 toe aan de card zodat alle kaarten in een rij even hoog worden.
<div class="container py-4">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100"> <!-- h-100 = hoogte van de rij -->
<div class="card-body d-flex flex-column">
<h5 class="card-title">Kaart 1</h5>
<p class="card-text text-muted flex-grow-1">
Beschrijving die automatisch meegroeit.
</p>
<!-- Knop altijd onderaan dankzij flex-column + flex-grow-1 -->
<a href="#" class="btn btn-primary mt-3">Lees meer</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card h-100"> ... </div>
</div>
</div>
</div>
🔗 CSS-link: h-100 = height: 100%. d-flex flex-column = display:flex; flex-direction:column;. flex-grow-1 = flex-grow:1 (de paragraaf neemt alle beschikbare ruimte zodat de knop altijd onderaan blijft). Precies wat je in de CSS-track hebt geleerd over flex-column layouts.
6 Oefening 1: Alert dashboard
Opdracht:
✓ Voeg een alert-success toe met tekst "Profiel bijgewerkt!"
✓ Voeg een alert-warning toe met tekst "E-mailadres nog niet bevestigd."
✓ Voeg badges toe: één bg-success "Actief" en één bg-warning text-dark "Concept"
✓ Voeg een knop toe met btn btn-danger en tekst "Account verwijderen"
7 Oefening 2: Drie-koloms card-grid
Opdracht: bouw een drie-koloms card-grid
✓ Drie cards in een row g-4
✓ Elke card: col-12 col-md-4
✓ Gebruik card h-100 voor gelijke hoogte
✓ Elke card heeft card-title, card-text en een btn
✓ Elke card heeft een badge in de titel met een andere kleur
Kennischeck
4 vragen — test je kennis van Bootstrap-componenten.
🎉
Les 4 voltooid!
Je kent knoppen, alerts, badges en cards. In les 5 leer je navbars, formulieren en tabellen — en de brug naar Symfony.
Bootstrap-track · Cheatsheet