Bootstrap-track › Les 7 van 7

🎨 Aanpassen & best practices

Custom CSS bovenop Bootstrap, CSS-variabelen, en wanneer je iets anders kiest.

⏱ 25 min • 7 stappen • Bootstrap 5 · Laatste les
Stap 1 / 7

De juiste aanpak: Bootstrap + eigen CSS

Bootstrap geeft je een solide basis, maar elke site heeft zijn eigen look. De sleutel is begrijpen in welke volgorde je stijlen laadt en hoe specificity werkt.

✗ Niet doen
<!-- Bootstrap NA je eigen CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">

Bootstrap overschrijft al je eigen stijlen

✓ Wel doen
<!-- Bootstrap EERST, dan je eigen CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">

Jouw stijlen winnen altijd van Bootstrap

Drie manieren om Bootstrap te overschrijven
1
Extra klassen toevoegen
<button class="btn btn-primary btn-xl">

Definieer .btn-xl in je eigen CSS

2
Bootstrap-klassen overschrijven
/* style.css — geladen NA bootstrap */
.btn-primary {
  background-color: #6d28d9; /* jouw paars */
  border-color: #6d28d9;
}
3
CSS-variabelen aanpassen (aanbevolen)

Zie stap 2 →

⚠️ Vermijd !important

!important werkt, maar maakt onderhoud een nachtmerrie. Als je het nodig hebt, is de laadvolgorde of specificiteit waarschijnlijk het echte probleem.

Stap 2 / 7

Bootstrap CSS-variabelen overschrijven

Bootstrap 5 gebruikt uitgebreid CSS custom properties (variabelen). Overschrijf ze op :root of op component-niveau — geen Sass compilatie nodig.

Globale kleur-thema aanpassen
/* style.css — geladen NA bootstrap */
:root {
  /* Primaire kleur wijzigen naar paars */
  --bs-primary:        #6d28d9;
  --bs-primary-rgb:    109, 40, 217;

  /* Link kleur */
  --bs-link-color:     #6d28d9;
  --bs-link-hover-color: #5b21b6;

  /* Body achtergrond en tekst */
  --bs-body-bg:        #f8f5ff;
  --bs-body-color:     #1e1b4b;

  /* Font */
  --bs-font-sans-serif: 'Inter', sans-serif;
  --bs-border-radius:  0.75rem;
}
Component-level variabelen
/* Alleen knoppen aanpassen */
.btn {
  --bs-btn-border-radius: 2rem;
  --bs-btn-font-weight: 700;
}

/* Alleen cards aanpassen */
.card {
  --bs-card-border-radius: 1rem;
  --bs-card-box-shadow:
    0 4px 24px rgba(0,0,0,.08);
}
Handige variabelen
--bs-primary
--bs-secondary
--bs-success / danger / warning / info
--bs-body-font-size
--bs-border-radius
--bs-card-bg
--bs-navbar-color
▶ Live voorbeeld — Bootstrap met custom paars thema
Stap 3 / 7

Eigen componenten bovenop Bootstrap

Soms heeft Bootstrap geen klasse voor precies wat je wilt. Dan schrijf je gewoon eigen CSS — Bootstrap staat daar niet in de weg.

Voorbeeld: "Hero" sectie — Bootstrap grid + eigen stijl
<!-- HTML: Bootstrap utilities + eigen class -->
<section class="hero-section text-center py-5">
  <div class="container">
    <h1 class="display-4 fw-bold">Welkom</h1>
    <p class="lead text-muted">Bouw sneller met Bootstrap.</p>
    <a href="#" class="btn btn-primary btn-lg">Aan de slag</a>
  </div>
</section>

/* CSS: eigen klasse die Bootstrap aanvult */
.hero-section {
  background: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%);
  color: white;
  min-height: 40vh;
  display: flex;
  align-items: center;
}
Best practices voor klassen-naamgeving
✓ Eigen klassen: semantisch
.hero-section { ... }
.product-card { ... }
.user-avatar { ... }
.sidebar-nav { ... }

Beschrijft WAT het is, niet hoe het eruitziet

✗ Vermijd presentatienamen
.big-blue-box { ... }
.red-text { ... }
.left-aligned { ... }
.rounded-corners { ... }

Die heeft Bootstrap al — en ze breken als het ontwerp wijzigt

▶ Live voorbeeld
Stap 4 / 7

Wanneer gebruik je Bootstrap — en wanneer niet?

Bootstrap is een uitstekend gereedschap, maar niet voor elke klus de juiste keuze. Kennen wanneer je het wél of niet inzet, maakt je een betere ontwikkelaar.

✓ Goed voor Bootstrap
  • 📋 Symfony admin-panels en back-office UI's
  • 🚀 Snel een prototype of MVP bouwen
  • 🏫 Leeromgevingen (dit platform!)
  • 📱 Sites waarbij responsive gedrag belangrijk is maar design niet kritisch
  • 🤝 Teams met weinig CSS-expertise
✗ Overweeg alternatieven bij
  • 🎨 Sterk custom design dat Bootstrap-defaults overal overschrijft
  • ⚡ Performance-kritische sites (Bootstrap is ~230KB)
  • 🧩 Projecten die al een component library hebben (bijv. Material UI)
  • 📦 Moderne JS-frameworks met eigen styling (Next.js + Tailwind)
🔵 Bootstrap vs Tailwind — het verschil in één zin
Bootstrap

Klaar-om-te-gebruiken componenten — knop, card, modal zijn al gestyled. Snel op gang, herkenbaar design.

<button class="btn btn-primary">
  Opslaan
</button>
Tailwind CSS

Utility-first — geen fertige componenten, je bouwt alles zelf op uit kleine klassen. Totale vrijheid, meer code.

<button class="bg-blue-600
  hover:bg-blue-700 text-white
  font-bold py-2 px-4 rounded">
  Opslaan
</button>

In de praktijk: Bootstrap voor Symfony-projecten en traditionele webapps. Tailwind voor moderne JS-frameworks (React, Vue, Next.js) met een custom design.

🎵 Bootstrap in Symfony projecten

Voor Symfony-projecten is Bootstrap een natuurlijke keuze. De combinatie van CDN (geen build-stap), bootstrap_5_layout.html.twig voor forms, en de beschikbare componenten maakt het een productieve keuze voor MBO/HBO-niveau projecten.

Stap 5 / 7

Bootstrap 4 vs Bootstrap 5

⚠️ We targetten Bootstrap 5

Bootstrap 4 gebruikt nog jQuery en heeft andere class-namen. Als je online een tutorial vindt die start met jquery.min.js, dan is het Bootstrap 4 — pas op.

Onderwerp Bootstrap 4 Bootstrap 5
JavaScript Vereist jQuery Vanilla JS, geen jQuery
Data attributen data-toggle="modal" data-bs-toggle="modal"
Margin/padding ml- / mr- ms- / me- (start/end)
Breakpoints sm/md/lg/xl sm/md/lg/xl/xxl
RTL Geen native support Ingebouwd RTL support
CSS variabelen Beperkt Uitgebreid, overal aanpasbaar
Snel herkennen: is het Bootstrap 4 of 5?
Bootstrap 4 signalen
  • • jquery.min.js ingeladen
  • • data-toggle (zonder "bs-")
  • • ml-3, mr-3 klassen
  • • CDN URL bevat @4.
Bootstrap 5 signalen
  • • Geen jQuery nodig
  • • data-bs-toggle
  • • ms-3, me-3 klassen
  • • CDN URL bevat @5.
Stap 6 / 7

Oefening — Custom Bootstrap thema

🎯 Opdracht

Pas Bootstrap aan zodat het een groen thema krijgt:

  • Overschrijf --bs-primary naar een groene kleur (bijv. #16a34a)
  • Geef knoppen afgeronde hoeken via --bs-btn-border-radius: 2rem
  • Voeg een eigen .hero-section klasse toe met een groene gradient achtergrond
  • Gebruik de hero voor een titel, tekst en een btn btn-primary knop
Oplossing tonen 
<style>
  :root {
    --bs-primary: #16a34a;
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: #16a34a;
  }
  .btn {
    --bs-btn-border-radius: 2rem;
  }
  .hero-section {
    background: linear-gradient(135deg, #16a34a, #065f46);
    color: white;
    padding: 3rem 0;
    text-align: center;
  }
</style>

<body>
  <section class="hero-section">
    <div class="container">
      <h1 class="display-5 fw-bold mb-3">Groen Thema</h1>
      <p class="lead mb-4 opacity-75">Bootstrap met eigen kleur via CSS-variabelen.</p>
      <a href="#" class="btn btn-primary btn-lg px-5">Aan de slag</a>
    </div>
  </section>
</body>

🧠 Kennischeck

🎉

Bootstrap-track voltooid!

Je hebt alle 7 lessen doorlopen. Je kent nu:

✓ Bootstrap CDN inladen
✓ Grid systeem & breakpoints
✓ Utility classes
✓ Knoppen, cards, alerts
✓ Navbar, forms, tabellen
✓ Symfony form theme
✓ Modals, dropdowns, accordions
✓ CSS-variabelen aanpassen
→ Symfony-track