🅱️Bootstrap 5

Wat is Bootstrap?

Bootstrap is het meest gebruikte front-end framework ter wereld: een verzameling kant-en-klare CSS (opmaak) en JavaScript (gedrag) die je in je pagina inlaadt. In plaats van zelf voor elke knop, kaart of menu CSS te schrijven, geef je je HTML-elementen de juiste classes en Bootstrap doet de rest.

Bootstrap inladen via een CDN

De eenvoudigste manier om Bootstrap te gebruiken is een CDN (Content Delivery Network): een snelle server die de bestanden voor je host. Je laadt twee bestanden in:

1. het CSS-bestand met een <link> in de <head>;
2. het JavaScript-bestand (de “bundle”, inclusief Popper voor dropdowns en tooltips) met een <script> onderaan de body.

index.html<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mijn eerste Bootstrap-pagina</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Hallo Bootstrap!</h1>
      <p>Deze pagina is opgemaakt met Bootstrap 5.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Je eerste Bootstrap-onderdelen

Op deze pagina is Bootstrap al voor je ingeladen, dus in de voorbeelden hoef je enkel de inhoud van de body te typen. Klik op Uitvoeren. Onder de code kies je de schermbreedte; rechtsonder in het voorbeeld zie je het actieve breakpoint.

Werken met classes

Bootstrap werkt met classes: korte namen die je aan een element geeft. Je kan er meerdere combineren, gescheiden door een spatie. Enkele voorbeelden die je in dit boek steeds terugziet:

Je hoeft ze niet van buiten te leren: de documentatie op getbootstrap.com toont bij elk onderdeel voorbeeldcode die je kan kopiëren. Leren werken met de documentatie is de belangrijkste vaardigheid!

Alternatieven: lokaal of via npm

Een CDN is handig, maar je kan Bootstrap ook downloaden en zelf in je map css/ en js/ bewaren (werkt offline), of installeren met npm install bootstrap in een groter project. Wie de kleuren en maten wil aanpassen, werkt met de Sass-bronbestanden (zie het hoofdstuk over thema’s). Voor deze cursus volstaat de CDN.

Synthese

Container

Elke Bootstrap-lay-out begint met een container: het vak dat je inhoud centreert en marge geeft links en rechts.

Het raster: row en col

Binnen een container werk je met het 12-kolommenraster. Een .row is een rij, met daarin kolommen .col-…. De getallen van je kolommen tellen op tot 12: dan staan ze mooi naast elkaar. Zijn het er meer dan 12, dan schuift de rest naar een nieuwe lijn.

Probeer het in het lab: verander col-md-4 in col-md-6 of col-md-3 en let op het breakpoint. Bij een smal scherm (onder 768 px) staan de kolommen onder elkaar!

Kolommen naast elkaar, verschillende breedtes

De kolommen in één rij mogen verschillende breedtes hebben, zolang de som 12 is. Een typische indeling is een menu (3) naast de inhoud (9). Bij col-… zonder breakpoint staan ze op elk scherm naast elkaar; met een breakpoint (col-md-…) staan ze onder elkaar op smalle schermen.

Ruimte tussen kolommen: gutters

De ruimte tussen de kolommen heet de gutter. Je regelt ze op de .row met g-0 t/m g-5 (of gx- voor horizontaal en gy- voor verticaal).

Offset, volgorde en uitlijning

Met row-cols-… maak je snel een galerij: alle kinderen krijgen dezelfde breedte en vallen vanzelf naar een nieuwe lijn.

Geneste rasters

Binnen een kolom kan je opnieuw een .row zetten met nieuwe kolommen. Die telt opnieuw tot 12 binnen de breedte van de ouderkolom.

Synthese

Breakpoints

Een breakpoint is een schermbreedte waarop je lay-out mag veranderen. Bootstrap kent er zes. Elk breakpoint geldt vanaf die breedte en groter (mobile first).

Kolommen per breakpoint

Combineer meerdere kolomclasses op één element: de laatste die van toepassing is voor de huidige breedte wint. Probeer het lab. Op xs staat elke kolom op een eigen lijn (col-12), vanaf md twee naast elkaar en vanaf xl vier. Klik door de breedtes heen!

Elementen tonen en verbergen

Met de display-classes toon of verberg je elementen per schermbreedte: d-none verbergt, d-block (of d-flex, d-inline…) toont. Met een breakpoint bepaal je vanaf wanneer.

Zo kan je bv. een uitgebreid menu tonen op een computer en een compact menu op een telefoon.

Responsive afbeeldingen

Een grote foto loopt op een telefoon uit zijn vak. Met img-fluid krijgt de afbeelding max-width: 100%; height: auto: ze wordt nooit breder dan haar ouder en behoudt de verhoudingen. Andere handige classes: rounded, rounded-circle (rond), img-thumbnail (rand) en object-fit-cover (bijsnijden).

Responsive tekst en video

Ook video’s en iframes schalen mee met een ratio-container: <div class="ratio ratio-16x9"> houdt de verhouding (16:9, 4:3, 21:9 of 1:1) op elke breedte. Tekst pas je aan met fs-1…fs-6 en uitlijning per breakpoint, bv. text-center text-md-start.

Synthese

Koppen en gewone tekst

Bootstrap geeft <h1> t/m <h6> een nette maat en marge. Wil je de uitzicht van een kop zonder de betekenis (SEO!) te veranderen, gebruik dan de classes h1–h6 op een ander element. Grotere “display”-koppen (display-1–display-6) zijn ideaal voor een hero. Een inleidende alinea krijgt lead.

Tekst opmaken met utilities

Met utility-classes (kleine, éénmalige classes) pas je tekst snel aan, zonder CSS te schrijven:

Kleuren: het contextuele systeem

Bootstrap heeft een vast palet met betekenis: elke kleur staat voor een “context”. Gebruik ze consequent!

Je past ze toe met een voorvoegsel: text- voor tekstkleur, bg- voor achtergrond, border- voor randen, btn- voor knoppen. Combineer bv. text-success, bg-danger, border-warning.

Subtiele varianten en transparantie

Naast de volle kleuren heeft Bootstrap 5.3 zachte “subtle”-varianten voor achtergronden en randen: bg-primary-subtle, text-primary-emphasis, border-primary-subtle. Ideaal voor rustige blokken met leesbare tekst. Met bg-opacity-25 of text-opacity-50 maak je een kleur doorzichtig.

Lettertypen en toegankelijkheid

Bootstrap gebruikt standaard het systeemlettertype van de gebruiker (snel en vertrouwd). Wil je monospace tekst (code)? Gebruik font-monospace. Denk ook aan contrast: witte tekst op een gele achtergrond (bg-warning) is slecht leesbaar; gebruik daar text-dark. Kleur alleen mag nooit de enige aanduiding zijn (kleurenblinden!): voeg een icoon of tekst toe.

Synthese

Margin en padding

Margin is de ruimte buiten een element (afstand tot de buren), padding is de ruimte binnen het element (tussen rand en inhoud). Bootstrap geeft ze korte namen die je zelf kan samenstellen:

Voorbeelden: mt-3 (marge boven 1 rem), px-4 (padding links en rechts 1,5 rem), p-2 (padding rondom 0,5 rem), mb-0 (geen marge onder). Ook per breakpoint: p-2 p-md-5. Stel er hieronder zelf een samen:

Ruimte tussen elementen: gap en mx-auto

Voor een rij elementen (bv. knoppen) geef je niet aan elk element een marge, maar gebruik je gap-3 op de ouder (werkt bij d-flex en d-grid). Een blok centreren doe je met een vaste breedte en mx-auto.

Randen, hoeken en schaduw

Breedte, hoogte en overloop

Voor formaat zijn er handige classes: w-25, w-50, w-75, w-100, w-auto (procent van de ouder) en dezelfde voor hoogte: h-100. Dan zijn er mw-100 (max-width), vw-100/vh-100 (schermbreedte/-hoogte) en min-vh-100 (minstens schermhoogte). overflow-auto laat een scrollbalk verschijnen als de inhoud niet past.

Positie en z-index

Ook positioneren kan met classes: position-relative, position-absolute, position-fixed en position-sticky, gecombineerd met top-0, start-0, end-0, bottom-0 en translate-middle (centreren op het punt). Zo plaats je bv. een badge in het hoekje van een knop.

Synthese

Wat is flexbox?

Standaard staan blokelementen onder elkaar. Zodra je d-flex op de ouder zet, worden de kinderen flex-items en staan ze naast elkaar in een rij. Daarna stuur je twee assen aan:

Speel met flexbox

Kies in de demo een richting en uitlijning en zie meteen wat er gebeurt. Onder het voorbeeld staat de bijhorende Bootstrap-class.

Richting en uitlijning

Het klassieke voorbeeld: een blok exact in het midden van de pagina zet je met d-flex justify-content-center align-items-center op de ouder.

Eén kind aansturen

Ook een kind heeft eigen classes: flex-grow-1 (neem alle vrije ruimte), flex-shrink-0 (niet krimpen), ms-auto (duw naar rechts met automatische marge), align-self-end (dit ene kind onderaan) en order-… (volgorde). Zo maak je een menubalk met het logo links en de knoppen rechts: geef het eerste knoppenitem ms-auto.

Flex of grid?

Gebruik het 12-kolommenraster (row/col) voor de grote pagina-indeling en flex-utilities voor uitlijning binnen een component (menu, kaart, knoppenrij). Ze vullen elkaar aan: in een col-md-6 kan je best een d-flex zetten.

Knoppen

Een knop krijgt altijd de basisclass btn plus een variant uit het kleurenpalet: btn-primary, btn-success, btn-danger… Met btn-outline-… krijg je een knop met enkel een rand. Werkt op <button>, <a> en <input>.

Maten en toestanden

Een knop die er niet uit mag zien als een knop maar wel als een link (bv. “Meer info”)? Gebruik btn btn-link.

Knoppengroepen

Zet knoppen naast elkaar in één balk met btn-group. Geef de groep role="group" en een aria-label. Met btn-toolbar combineer je meerdere groepen.

Badges

Een badge is een klein label, vaak een teller of status: <span class="badge text-bg-primary">. Met text-bg-… krijg je meteen een goed leesbare achtergrond-/tekstkleurcombinatie; met rounded-pill een ronde vorm.

Alerts

Een alert is een gekleurde melding: <div class="alert alert-success" role="alert">. Kies de context (success, danger, warning, info…), voeg een kop toe met alert-heading en links met alert-link. Een alert die de gebruiker kan wegklikken gebruikt alert-dismissible fade show en een sluitknop btn-close met data-bs-dismiss="alert" (dit werkt dankzij de Bootstrap-JavaScript, zonder dat je zelf code schrijft).

Voortgang en spinners

Een progress bar toont voortgang: een progress-vak met daarin een progress-bar waarvan je de breedte instelt (bv. style="width: 60%"). Voeg progress-bar-striped progress-bar-animated toe voor een bewegende streeppatroon. Een spinner (spinner-border of spinner-grow) toont dat er iets laadt.

Synthese

De kaart

Een card is een flexibele container voor gegroepeerde inhoud. Elke kaart bestaat uit een aantal onderdelen die je zelf kiest:

Kaarten in het raster

Zet kaarten in een row met kolommen, zodat ze meeschalen. Met h-100 op de kaart worden alle kaarten in een rij even hoog, ook als de tekst verschilt. Probeer het lab: kies verschillende schermbreedtes en let op het aantal kaarten per rij.

Kop, voet en gekleurde kaarten

Met card-header en card-footer voeg je balken toe. Kleur de hele kaart met text-bg-primary of gebruik een gekleurde rand (border-success). Een afbeelding als achtergrond met tekst erover doe je met card-img-overlay.

List group

Een list-group is een nette lijst met items (list-group-item). Handig voor menu’s, instellingen of een overzicht. Met list-group-item-action op een <a> worden de items klikbaar; met active markeer je de huidige, en list-group-flush haalt de buitenrand weg (handig in een kaart).

Accordeon

Een accordeon klapt onderdelen open en dicht en is ideaal voor veelgestelde vragen. Elk item heeft een knop met data-bs-toggle="collapse" en data-bs-target="#…" dat naar het id van het in- en uitklapbare deel wijst. Met data-bs-parent zorg je dat er telkens maar één open is.

Synthese

De navbar

De navbar is de menubalk bovenaan. Ze is standaard responsive: op een klein scherm klapt ze in tot een hamburgerknop. Onderdelen:

Kleur en thema bepaal je met bg-dark/bg-primary en data-bs-theme="dark" (lichte tekst). Klik in het lab op 375 en gebruik de hamburgerknop!

Dropdown in het menu en vaste plaats

Een dropdown zet je in een nav-item dropdown met een link nav-link dropdown-toggle (data-bs-toggle="dropdown") en een <ul class="dropdown-menu"> met dropdown-items. Met sticky-top blijft de navbar bovenaan plakken bij scrollen, met fixed-top ligt ze altijd vast (dan heeft je body wat padding-top nodig).

Tabs en pills

Met nav nav-tabs of nav nav-pills maak je lijstjes met tabbladen. Verbind je ze met een tab-content (en data-bs-toggle="tab"), dan werkt het als echte tabbladen waarbij elke tab zijn eigen inhoud toont.

Broodkruimels en paginering

Breadcrumbs tonen waar de bezoeker zich in de site bevindt: <nav aria-label="breadcrumb"><ol class="breadcrumb"> met breadcrumb-item-items, waarvan het laatste active is. Paginering hoort bij lange lijsten: pagination met page-item en page-link.

Synthese

Tekstvelden

Elk invoerveld krijgt de class form-control (nette breedte, rand en focus-effect) en een <label class="form-label"> ervoor. Koppel label en veld altijd met for en id: zo kan je op het label klikken en lezen schermlezers het voor.

Formulieren in het raster

Met het raster zet je velden naast elkaar en laat je ze op smalle schermen onder elkaar staan. Probeer het lab en test de breedtes.

Keuzelijsten, checkboxes, radio en switch

Invoergroepen en zwevende labels

Met een input-group plak je tekst of knoppen vast aan een veld (input-group-text). Bij floating labels zweeft het label in het veld en schuift het naar boven zodra je typt: form-floating met eerst de input (met placeholder) en dán de label.

Validatie

Bootstrap toont validatie met de classes is-valid (groen) en is-invalid (rood) op het veld en een bericht in valid-feedback of invalid-feedback. Met HTML-attributen (required, minlength, type="email") en needs-validation + novalidate laat je de browser de controle doen; een klein stukje JavaScript zet dan was-validated op het formulier. Let op: validatie in de browser is enkel een gemak; controleer altijd ook op de server!

Synthese

Een nette tabel

Een gewone HTML-tabel wordt met de class table meteen mooi opgemaakt. Voeg varianten toe door classes te combineren:

Responsive tabellen

Een brede tabel loopt op een telefoon uit het scherm. Zet de tabel in een <div class="table-responsive">: bij een te smal scherm verschijnt dan een horizontale scrollbalk in plaats van dat de hele pagina breder wordt. Met table-responsive-md geldt dat enkel onder md.

Afbeeldingen met bijschrift

Een afbeelding met tekst eronder zet je in een <figure class="figure"> met figure-img img-fluid en figure-caption. Voor een klein profielfoto’tje gebruik je rounded-circle met een vaste width/height, en met object-fit-cover snijd je de foto netjes bij zodat ze niet uitrekt.

Bootstrap Icons

Bootstrap Icons zijn meer dan 2000 gratis iconen (icons.getbootstrap.com). Je laadt ze in met een extra <link> naar het CSS-bestand (in deze cursus al gedaan) en gebruikt ze als <i class="bi bi-…"></i>. Het zijn lettertekens, dus je geeft ze grootte en kleur met gewone classes (fs-1, text-danger). Gebruik ze in knoppen, menu’s en lijsten, en geef een icoon zonder tekst een aria-label.

Synthese

Hoe werkt Bootstrap-JavaScript?

Onderaan je pagina laad je de bundle in (hoofdstuk 1). Die zoekt naar data-attributen op je elementen. Zo werkt bijna alles volgens hetzelfde recept:

Voor speciale situaties (bv. een modal openen na 5 seconden) gebruik je de JavaScript-API: new bootstrap.Modal(element).show().

Modal

Een modal is een pop-upvenster boven de pagina. De bouw is altijd: modal → modal-dialog → modal-content → modal-header / modal-body / modal-footer. De knop verwijst met data-bs-target naar het id van de modal; een sluitknop gebruikt data-bs-dismiss="modal". Voeg modal-dialog-centered toe om te centreren of modal-lg voor een grotere.

Dropdown, collapse en offcanvas

Een dropdown bestaat uit een knop met dropdown-toggle en data-bs-toggle="dropdown", gevolgd door een dropdown-menu. Met collapse toon of verberg je een stuk inhoud. Offcanvas is een paneel dat vanaf de zijkant inschuift (menu’s op mobiel, winkelwagen…).

Tooltip en popover

Een tooltip is een klein tekstballonnetje bij hover; een popover is een grotere met titel en inhoud bij klik. Ze zijn “opt-in”: je moet ze één keer met JavaScript activeren, omdat ze de bibliotheek Popper gebruiken. Zet de tekst in data-bs-title (tooltip) of data-bs-title en data-bs-content (popover).

Carousel

Een carousel toont een reeks slides (foto’s) die je kan doorbladeren. Belangrijk: elke slide is een carousel-item en precies één daarvan heeft ook active. De pijlen gebruiken data-bs-slide="prev"/"next", de puntjes data-bs-slide-to. Met data-bs-ride="carousel" loopt hij vanzelf.

Toast en de JavaScript-API

Een toast is een korte melding die na een paar seconden verdwijnt (denk aan “Opgeslagen!”). Toasts start je altijd met JavaScript, met new bootstrap.Toast(element).show(). Zo kan je ze koppelen aan een eigen gebeurtenis, bijvoorbeeld het resultaat van een AJAX-aanvraag.

Synthese

Donkere modus

Sinds Bootstrap 5.3 werkt een kleurmodus met het attribuut data-bs-theme op het <html>-element (voor de hele pagina) of op één component. De waarden zijn light en dark: alle achtergronden, teksten, kaarten en formulieren passen zich meteen aan. Met een beetje JavaScript laat je de bezoeker wisselen (en onthoud je de keuze in localStorage).

CSS-variabelen

Bootstrap gebruikt CSS-variabelen (custom properties) zoals --bs-primary, --bs-body-bg of --bs-border-radius. Door ze te overschrijven verander je het uitzicht van de hele site, zonder Bootstrap zelf aan te raken. Overschrijf ze in je eigen CSS, op :root (globaal) of op één element (lokaal).

Je eigen CSS toevoegen

Bootstrap dekt veel, maar niet alles. Voor je eigen stijlen schrijf je een eigen stylesheet en laad je die ná Bootstrap in, zodat jouw regels voorrang krijgen. Goede gewoonten:

• Pas Bootstrap-bestanden nooit rechtstreeks aan (bij een update zijn je wijzigingen weg).
• Geef eigen onderdelen een eigen class (.mijn-hero), niet door bestaande Bootstrap-classes te overschrijven.
• Zoek eerst of Bootstrap al een utility heeft; schrijf pas dan zelf CSS.
• Gebruik zo weinig !important mogelijk.

In een echte pagina ziet dat er zo uit:

index.html (head)<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/stijl.css" rel="stylesheet">   <!-- jouw CSS, ná Bootstrap -->

Sass, npm en de custom builder

Wie diep wil aanpassen (eigen kleurenpalet, breakpoints, sommige componenten uitschakelen), werkt met de Sass-bronbestanden: je overschrijft variabelen zoals $primary vóór het importeren en compileert alles tot één kleiner CSS-bestand. Dat is een stap voor gevorderden (Node.js, npm, een bundler zoals Vite). Voor de meeste schoolprojecten volstaan CDN + eigen CSS en variabelen.

De opdracht

Je bouwt een eenpagina-website voor de bakkerij “De Krakeling”. De pagina moet op een telefoon, tablet en computer goed werken. Onderdelen:

1. Navbar die inklapt op mobiel, met logo en 3 links;
2. Hero met grote titel, lead-tekst en een knop;
3. Producten: minstens 3 kaarten in een responsive raster;
4. Contactformulier in een raster (voornaam/achternaam naast elkaar);
5. Een modal (bv. “Openingsuren”);
6. Footer met tekst gecentreerd.

Voorbeeld: de eerste drie onderdelen

Zo kan het begin eruitzien. Bekijk de opbouw, verander iets en test op de verschillende breedtes. Let op hoe sticky-top, row-cols-1 row-cols-md-3 en h-100 samenwerken.

Controlelijst voor je eindresultaat

Wat nu?

Je kent nu de basis van Bootstrap. Mogelijke vervolgstappen: een PHP-formulier laten verwerken (zie de PHP-cursus), je site publiceren op een webhost, een eigen kleurenpalet met Sass, of een ander framework leren zoals Tailwind CSS. Het belangrijkste blijft: veel oefenen en de documentatie leren gebruiken.