Bootstrap Les 5: Navbar, forms & tabellen

Home›Bootstrap-track›Les 5

📋 Componenten 2: navbar, forms en tabellen

⏱ Geschatte leestijd: 35 minuten · 7 stappen

In deze les leer je drie componenten die je in vrijwel elk webproject tegenkomt: een responsive navigatiebalk, Bootstrap-formulieren en gestijlde tabellen. Bovendien: hoe het Symfony Bootstrap-formulierthema werkt en wat dat voor jou als ontwikkelaar betekent.

1 Navbar — responsive navigatiebalk

Wat betekent dit?

Een Bootstrap navbar klapt op mobiel automatisch in tot een hamburgermenu. Dat gedrag is ingebouwd via data-bs-toggle en Bootstrap JS — je hoeft geen JavaScript te schrijven.

Standaard responsive navbar

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">

    <!-- Logo / merknaam -->
    <a class="navbar-brand" href="/">MijnSite</a>

    <!-- Hamburgerknop (zichtbaar op mobiel) -->
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links die inklappen op mobiel -->
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/over">Over ons</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
      <a href="/login" class="btn btn-outline-light ms-3">Inloggen</a>
    </div>

  </div>
</nav>

Kleurthema's

bg-dark navbar-dark — donker met witte links

bg-light navbar-light — licht met donkere links

bg-primary navbar-dark — blauw

Inklapmoment

navbar-expand-sm — klapt uit vanaf 576px

navbar-expand-md — vanaf 768px

navbar-expand-lg — vanaf 992px

2 Formulieren — form-control en form-label

Bootstrap stijlt formulieren met drie klassen: form-label (label), form-control (input/textarea/select) en mb-3 (ruimte tussen velden). De wrapper form-group bestaat niet meer in Bootstrap 5 — je gebruikt gewoon mb-3.

✗ Kale HTML — ongestijld

<label>Naam</label>
<input type="text">

<label>E-mail</label>
<input type="email">

<button>Verzenden</button>

✓ Met Bootstrap-klassen

<div class="mb-3">
  <label class="form-label">Naam</label>
  <input type="text" class="form-control">
</div>
<div class="mb-3">
  <label class="form-label">E-mail</label>
  <input type="email" class="form-control">
</div>
<button class="btn btn-primary">Verzenden</button>

Alle formulierelementen

<!-- Tekstveld -->
<input type="text" class="form-control" placeholder="Voer tekst in">

<!-- Select -->
<select class="form-select">
  <option>Kies een optie</option>
  <option>Optie A</option>
</select>

<!-- Textarea -->
<textarea class="form-control" rows="3"></textarea>

<!-- Checkbox -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="akkoord">
  <label class="form-check-label" for="akkoord">Ik ga akkoord</label>
</div>

<!-- Foutmelding bij een veld -->
<input type="email" class="form-control is-invalid">
<div class="invalid-feedback">Voer een geldig e-mailadres in.</div>

<!-- Help-tekst -->
<div class="form-text text-muted">We delen je e-mail niet.</div>

3 Input groups — prefix en suffix aan velden

Met input-group plak je tekst of knoppen voor of achter een invoerveld — ideaal voor valuta, eenheden, zoekbalken of URL-prefixen.

Input group voorbeelden

<!-- Prefix -->
<div class="input-group mb-3">
  <span class="input-group-text">€</span>
  <input type="number" class="form-control" placeholder="Prijs">
</div>

<!-- Suffix -->
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Gebruikersnaam">
  <span class="input-group-text">@mijnsite.nl</span>
</div>

<!-- Met zoekknop -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Zoeken...">
  <button class="btn btn-primary">Zoeken</button>
</div>

4 ⚡ De Symfony Bootstrap-brug

⚡ Komt terug in Symfony

Symfony genereert formulier-HTML via Twig met form_row(), form_label() en form_widget(). Standaard genereert dit kale HTML zonder opmaak. Maar met het Bootstrap 5-formulierthema voegt Symfony automatisch de juiste Bootstrap-klassen toe — zonder dat jij dat hoeft te doen.

Wat form_row(form.naam) met het Bootstrap-thema genereert:

Twig — jij schrijft dit

{{ form_start(form) }}
  {{ form_row(form.naam) }}
  {{ form_row(form.email) }}
  {{ form_row(form.bericht) }}
  <button class="btn btn-primary">
    Verzenden
  </button>
{{ form_end(form) }}

Bootstrap-thema genereert dit

<div class="mb-3">
  <label class="form-label">
    Naam
  </label>
  <input type="text"
    class="form-control"
    name="naam">
</div>
<!-- idem voor email, bericht -->

Het thema activeer je met één regel in je Twig-template of globaal in config/packages/twig.yaml:

Activeren — twee manieren

{% comment %}Manier 1: bovenaan één Twig-template{% endcomment %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}

{# Manier 2: globaal in config/packages/twig.yaml #}
twig:
    form_themes: ['bootstrap_5_layout.html.twig']

Validatiefouten verschijnen automatisch als is-invalid + invalid-feedback — precies de Bootstrap-klassen die je in stap 2 hebt geleerd. Nu begrijp je wat Symfony onder de motorkap doet.

Validatiefout — Symfony + Bootstrap thema

<!-- Wat Symfony genereert bij een validatiefout -->
<div class="mb-3">
  <label class="form-label">E-mail</label>
  <input type="email"
    class="form-control is-invalid"
    value="geen-email">
  <div class="invalid-feedback">
    Voer een geldig e-mailadres in.
  </div>
</div>

💡 Samenvatting: je hoeft in Symfony geen Bootstrap-klassen op formuliervelden te zetten — het thema doet dat. Maar je moet Bootstrap wel zelf inladen in je Twig-basistemplate (via CDN of asset). Wat je in deze les geleerd hebt over form-control, form-label en is-invalid is precies wat Symfony voor je genereert.

5 Tabellen — gestijlde datatabellen

Tabel-klassen

<!-- Basis Bootstrap tabel -->
<table class="table">
  <thead>
    <tr><th>Naam</th><th>Status</th><th>Prijs</th></tr>
  </thead>
  <tbody>
    <tr><td>Product A</td><td>Actief</td><td>€ 29,99</td></tr>
  </tbody>
</table>

<!-- Varianten (combineerbaar) -->
<table class="table table-striped">  <!-- afwisselend grijs -->
<table class="table table-hover">    <!-- rij oplichten bij hover -->
<table class="table table-bordered"> <!-- borders overal -->
<table class="table table-sm">       <!-- compacte weergave -->
<table class="table table-dark">     <!-- donker thema -->

<!-- Responsief (horizontaal scrollen op mobiel) -->
<div class="table-responsive">
  <table class="table">...</table>
</div>

6 Oefening 1: Registratieformulier

Opdracht: bouw een registratieformulier

✓ Drie velden: naam (text), e-mail (email), wachtwoord (password)

✓ Elk veld: form-label + form-control + omsloten door mb-3

✓ Een form-check checkbox "Ik ga akkoord met de voorwaarden"

✓ Een submit-knop: btn btn-primary w-100

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registreren</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="card mx-auto" style="max-width:420px">
    <div class="card-body">
      <h4 class="card-title mb-4">Account aanmaken</h4>
      <form>
        <!-- Naam veld -->

        <!-- E-mail veld -->

        <!-- Wachtwoord veld -->

        <!-- Checkbox -->

        <!-- Submit knop -->

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

Live preview

7 Oefening 2: Navbar + tabel pagina

Opdracht: bouw een beheerpagina met navbar en tabel

✓ Navbar met navbar navbar-expand-lg bg-dark navbar-dark

✓ Merknaam en drie navigatielinks

✓ Tabel met table table-striped table-hover

✓ Tabel heeft minimaal 3 rijen met data

✓ Minstens één badge (bg-success of bg-warning) in de tabel

editor

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beheer</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

  <!-- Navbar hier -->

  <div class="container mt-4">
    <h2 class="mb-3">Productoverzicht</h2>
    <!-- Tabel hier -->
  </div>

</body>
</html>

Live preview

Kennischeck

4 vragen — inclusief de Symfony Bootstrap-brug.

← Les 4: Componenten 1 Les 6: JS-componenten →

Bootstrap-track · Cheatsheet