Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2 / Componenten

Cards

De cards van Bootstrap bieden een flexibele en uitbreidbare contentcontainer met meerdere varianten en opties.

Over

Een card is een flexibele en uitbreidbare contentcontainer. Hij biedt opties voor koppen en voetteksten, uiteenlopende content, contextuele achtergrondkleuren en krachtige weergaveopties. Ben je bekend met Bootstrap 3: cards vervangen onze oude panels, wells en thumbnails. Vergelijkbare functionaliteit is beschikbaar als modifier-klassen voor cards.

Voorbeeld

Cards zijn gebouwd met zo min mogelijk markup en stijlen, maar bieden toch een enorme mate van controle en aanpasbaarheid. Ze zijn met flexbox gebouwd, wat eenvoudige uitlijning oplevert, en combineren goed met andere Bootstrap-componenten. Ze hebben standaard geen margin, dus gebruik naar behoefte spacing-utilities.

Hieronder staat een voorbeeld van een eenvoudige card met gemengde content en een vaste breedte. Cards hebben om te beginnen geen vaste breedte, dus ze vullen vanzelf de volledige breedte van hun bovenliggende element. Dat pas je eenvoudig aan met onze diverse afmetingsopties.

HTML
<div class="card" style="width: 18rem;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

Contenttypes

Cards ondersteunen uiteenlopende content, waaronder afbeeldingen, tekst, list groups, links en meer. Hieronder vind je voorbeelden van wat ondersteund wordt.

Body

De bouwsteen van een card is de .card-body. Gebruik hem wanneer je een sectie met padding binnen een card nodig hebt.

HTML
<div class="card">
  <div class="card-body">
    Dit is wat tekst binnen een card-body.
  </div>
</div>

Card-titels maak je door .card-title aan een <h*>-tag toe te voegen. Op dezelfde manier voeg je links toe die naast elkaar staan door .card-link aan een <a>-tag toe te voegen.

Ondertitels maak je door .card-subtitle aan een <h*>-tag toe te voegen. Als de items .card-title en .card-subtitle in een .card-body staan, lijnen de card-titel en -ondertitel netjes uit.

HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card-ondertitel</h6>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
    <a href="#" class="card-link">Card-link</a>
    <a href="#" class="card-link">Nog een link</a>
  </div>
</div>

Afbeeldingen

.card-img-top plaatst een afbeelding bovenaan de card. Met .card-text kun je tekst aan de card toevoegen. Tekst binnen .card-text kan ook met de standaard HTML-tags worden opgemaakt.

HTML
<div class="card" style="width: 18rem;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
  <div class="card-body">
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

List groups

Maak lijsten met content in een card met een flush list group.

HTML
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Een item</li>
    <li class="list-group-item">Een tweede item</li>
    <li class="list-group-item">Een derde item</li>
  </ul>
</div>
HTML
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Uitgelicht
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Een item</li>
    <li class="list-group-item">Een tweede item</li>
    <li class="list-group-item">Een derde item</li>
  </ul>
</div>
HTML
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Een item</li>
    <li class="list-group-item">Een tweede item</li>
    <li class="list-group-item">Een derde item</li>
  </ul>
  <div class="card-footer">
    Card-voettekst
  </div>
</div>

Alles erin

Combineer meerdere contenttypes om de card te maken die je nodig hebt, of gooi er alles in. Hieronder zie je afbeeldingsstijlen, blokken, tekststijlen en een list group — allemaal in een card met vaste breedte.

HTML
<div class="card" style="width: 18rem;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Een item</li>
    <li class="list-group-item">Een tweede item</li>
    <li class="list-group-item">Een derde item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card-link</a>
    <a href="#" class="card-link">Nog een link</a>
  </div>
</div>

Kop en voettekst

Voeg binnen een card een optionele kop en/of voettekst toe.

HTML
<div class="card">
  <div class="card-header">
    Uitgelicht
  </div>
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

Card-koppen kun je opmaken door .card-header aan <h*>-elementen toe te voegen.

HTML
<div class="card">
  <h5 class="card-header">Uitgelicht</h5>
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>
HTML
<div class="card">
  <div class="card-header">
    Citaat
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Een bekend citaat, opgenomen in een blockquote-element.</p>
      <footer class="blockquote-footer">Iemand beroemds in <cite title="Brontitel">Brontitel</cite></footer>
    </blockquote>
  </div>
</div>
HTML
<div class="card text-center">
  <div class="card-header">
    Uitgelicht
  </div>
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
  <div class="card-footer text-muted">
    2 dagen geleden
  </div>
</div>

Afmetingen

Cards gaan om te beginnen niet uit van een specifieke width, dus ze zijn 100% breed tenzij anders aangegeven. Dat kun je naar behoefte wijzigen met eigen CSS, grid-klassen, grid-Sass-mixins of utilities.

Met grid-markup

Wikkel cards met het grid naar behoefte in kolommen en rijen.

HTML
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Speciale titelbehandeling</h5>
        <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
        <a href="#" class="btn btn-primary">Ga ergens heen</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Speciale titelbehandeling</h5>
        <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
        <a href="#" class="btn btn-primary">Ga ergens heen</a>
      </div>
    </div>
  </div>
</div>

Met utilities

Gebruik ons handvol beschikbare afmetings-utilities om snel de breedte van een card in te stellen.

HTML
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Knop</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Knop</a>
  </div>
</div>

Met eigen CSS

Gebruik eigen CSS in je stylesheets of als inline stijlen om een breedte in te stellen.

HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

Tekstuitlijning

Je kunt de tekstuitlijning van elke card — in zijn geheel of van specifieke onderdelen — snel wijzigen met onze tekstuitlijningsklassen.

HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

Voeg met de nav-componenten van Bootstrap navigatie toe aan de kop (of een blok) van een card.

HTML
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Actief</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Uitgeschakeld</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>
HTML
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Actief</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Uitgeschakeld</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Speciale titelbehandeling</h5>
    <p class="card-text">Met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    <a href="#" class="btn btn-primary">Ga ergens heen</a>
  </div>
</div>

Afbeeldingen

Cards bieden een paar opties om met afbeeldingen te werken. Kies uit "image caps" aan een van beide uiteinden van een card, afbeeldingen met card-content eroverheen, of gewoon een afbeelding ingebed in een card.

Image caps

Net als koppen en voetteksten kunnen cards "image caps" boven- en onderaan bevatten — afbeeldingen aan de boven- of onderkant van een card.

HTML
<div class="card mb-3">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
    <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
    <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
  </div>
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-bottom" alt="Image cap">
</div>

Afbeeldingsoverlays

Maak van een afbeelding een card-achtergrond en leg de tekst van je card eroverheen. Afhankelijk van de afbeelding heb je wel of geen extra stijlen of utilities nodig.

HTML
<div class="card text-bg-dark">
  <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20270%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Card%20image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3ECard%20image%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="270" class="bd-placeholder-img-lg card-img" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card-titel</h5>
    <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
    <p class="card-text"><small>3 minuten geleden bijgewerkt</small></p>
  </div>
</div>
Let op

Let op: content hoort niet groter te zijn dan de hoogte van de afbeelding. Is de content groter dan de afbeelding, dan wordt hij buiten de afbeelding weergegeven.

Horizontaal

Met een combinatie van grid- en utility-klassen kun je cards op een mobielvriendelijke en responsieve manier horizontaal maken. In het onderstaande voorbeeld verwijderen we de grid-gutters met .g-0 en gebruiken we .col-md-*-klassen om de card vanaf het md-breakpoint horizontaal te maken. Afhankelijk van je card-content zijn er mogelijk verdere aanpassingen nodig.

HTML
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20250%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="250" class="img-fluid rounded-start" alt="Image">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
        <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
      </div>
    </div>
  </div>
</div>

Card-stijlen

Cards bieden verschillende opties om hun achtergronden, randen en kleur aan te passen.

Achtergrond en kleur

Nieuw in v5.2.0

Stel een background-color met een contrasterende voorgrond-color in met onze .text-bg-{color}-helpers. Voorheen moest je je keuze uit de .text-{color}- en .bg-{color}-utilities handmatig combineren voor de styling; dat kun je nog steeds doen als je dat liever hebt.

HTML
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Primary-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Secondary-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Success-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Danger-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Warning-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Info-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Light-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Dark-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>
Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Rand

Gebruik border-utilities om alleen de border-color van een card te wijzigen. Let op: je kunt .text-{color}-klassen op de bovenliggende .card of op een deel van de inhoud van de card zetten, zoals hieronder te zien is.

HTML
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Warning-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Info-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body">
    <h5 class="card-title">Light-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Kop</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
</div>

Mixins-utilities

Je kunt de randen van de card-kop en -voettekst naar behoefte wijzigen, en zelfs hun background-color verwijderen met .bg-transparent.

HTML
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Kop</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success-card-titel</h5>
    <p class="card-text">Wat korte voorbeeldtekst om voort te bouwen op de card-titel en het grootste deel van de inhoud van de card te vormen.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Voettekst</div>
</div>

Card-layout

Naast het opmaken van de content binnen cards biedt Bootstrap een paar opties om reeksen cards te ordenen. Voorlopig zijn deze layout-opties nog niet responsief.

Card groups

Gebruik card groups om cards als één aaneengesloten element met even brede en even hoge kolommen weer te geven. Card groups beginnen gestapeld en gebruiken display: flex; om vanaf het sm-breakpoint aaneengesloten en met uniforme afmetingen te worden.

HTML
<div class="card-group">
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
    </div>
  </div>
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Deze card heeft ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
      <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
    </div>
  </div>
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze card heeft nog langere content dan de eerste, om dat gelijke-hoogte-effect te laten zien.</p>
      <p class="card-text"><small class="text-muted">3 minuten geleden bijgewerkt</small></p>
    </div>
  </div>
</div>

Wanneer je card groups met voetteksten gebruikt, lijnt hun content automatisch uit.

HTML
<div class="card-group">
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3 minuten geleden bijgewerkt</small>
    </div>
  </div>
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Deze card heeft ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3 minuten geleden bijgewerkt</small>
    </div>
  </div>
  <div class="card">
    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
    <div class="card-body">
      <h5 class="card-title">Card-titel</h5>
      <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze card heeft nog langere content dan de eerste, om dat gelijke-hoogte-effect te laten zien.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3 minuten geleden bijgewerkt</small>
    </div>
  </div>
</div>

Grid-cards

Gebruik het grid-systeem van Bootstrap en de .row-cols-klassen om te bepalen hoeveel grid-kolommen (om je cards heen) je per rij toont. Hier is bijvoorbeeld .row-cols-1 die de cards in één kolom plaatst, en .row-cols-md-2 die vier cards vanaf het medium breakpoint met gelijke breedte over meerdere rijen verdeelt.

HTML
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
</div>

Verander het in .row-cols-3 en je ziet de vierde card omslaan.

HTML
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
</div>

Wanneer je gelijke hoogtes nodig hebt, voeg je .h-100 aan de cards toe. Wil je standaard gelijke hoogtes, dan kun je in Sass $card-height: 100% instellen.

HTML
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een korte card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20140%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="140" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een langere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
    </div>
  </div>
</div>

Net als bij card groups lijnen card-voetteksten automatisch uit.

HTML
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze content is wat langer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3 minuten geleden bijgewerkt</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Deze card heeft ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3 minuten geleden bijgewerkt</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20180%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Image%20cap%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868e96%22%3E%3C%2Frect%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20dy%3D%22.3em%22%20text-anchor%3D%22middle%22%20font-family%3D%22sans-serif%22%20font-size%3D%2212%22%3EImage%20cap%3C%2Ftext%3E%3C%2Fsvg%3E" width="100%" height="180" class="card-img-top" alt="Image cap">
      <div class="card-body">
        <h5 class="card-title">Card-titel</h5>
        <p class="card-text">Dit is een bredere card met ondersteunende tekst eronder als natuurlijke opmaat naar aanvullende content. Deze card heeft nog langere content dan de eerste, om dat gelijke-hoogte-effect te laten zien.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3 minuten geleden bijgewerkt</small>
      </div>
    </div>
  </div>
</div>

Masonry

In v4 gebruikten we een techniek met alleen CSS om het gedrag van Masonry-achtige kolommen na te bootsen, maar die techniek kwam met veel onprettige bijwerkingen. Wil je dit soort layout in v5, gebruik dan gewoon de Masonry-plugin. Masonry zit niet in Bootstrap, maar we hebben een voorbeelddemo gemaakt om je op weg te helpen.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken cards nu lokale CSS-variabelen op .card, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_card.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.