Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

Kaarten

De kaarten van Bootstrap bieden een flexibele en uitbreidbare inhoudcontainer met meerdere varianten en opties.

Op deze pagina

Over

Een kaart is een flexibele en uitbreidbare inhoudcontainer. Het bevat opties voor kop- en voetteksten, een breed scala aan inhoud, contextuele achtergrondkleuren en krachtige weergave-opties. Als u bekend bent met Bootstrap 3, vervangen kaarten onze oude panelen, putten en miniaturen. Een soortgelijke functionaliteit als die componenten is beschikbaar als modificatieklassen voor kaarten.

Voorbeeld

Kaarten zijn gebouwd met zo min mogelijk opmaak en stijlen, maar slagen er toch in om veel controle en maatwerk te bieden. Gebouwd met flexbox, bieden ze eenvoudige uitlijning en mengen ze goed met andere Bootstrap-componenten. Ze hebben er marginstandaard geen, dus gebruik indien nodig spatiëringshulpprogramma's .

Hieronder ziet u een voorbeeld van een basiskaart met gemengde inhoud en een vaste breedte. Kaarten hebben geen vaste breedte om te beginnen, dus vullen ze natuurlijk de volledige breedte van het bovenliggende element. Dit is eenvoudig aan te passen met onze verschillende maatopties .

Placeholder Image cap
Kaart titel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

Ergens heengaan 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Inhoudstypen

Kaarten ondersteunen een breed scala aan inhoud, waaronder afbeeldingen, tekst, lijstgroepen, koppelingen en meer. Hieronder staan ​​voorbeelden van wat wordt ondersteund.

Lichaam

De bouwsteen van een kaart is de .card-body. Gebruik het wanneer je een gewatteerd gedeelte in een kaart nodig hebt.

Dit is wat tekst binnen een kaartlichaam. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titels, tekst en links

Kaarttitels worden gebruikt door ze toe te voegen .card-titleaan een <h*>tag. Op dezelfde manier worden links toegevoegd en naast elkaar geplaatst door ze toe te voegen .card-linkaan een <a>tag.

Ondertitels worden gebruikt door een .card-subtitleaan een <h*>tag toe te voegen. Als de .card-titleen de .card-subtitleitems in een .card-bodyitem worden geplaatst, worden de kaarttitel en ondertitel mooi uitgelijnd.

Kaart titel
Kaart ondertitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

Kaartlink Nog een link 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Afbeeldingen

.card-img-topplaatst een afbeelding bovenaan de kaart. Met .card-textkan tekst aan de kaart worden toegevoegd. Tekst binnenin .card-textkan ook worden opgemaakt met de standaard HTML-tags.

Placeholder Image cap

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lijst groepen

Maak lijsten met inhoud op een kaart met een spoellijstgroep.

  • Een item
  • Een tweede item
  • Een derde item
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Aanbevolen
  • Een item
  • Een tweede item
  • Een derde item
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Een item
  • Een tweede item
  • Een derde item
Kaartvoettekst 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Gootsteen

Mix en match meerdere inhoudstypes om de kaart te maken die je nodig hebt, of gooi alles erin. Hieronder worden afbeeldingsstijlen, blokken, tekststijlen en een lijstgroep weergegeven, allemaal verpakt in een kaart met vaste breedte.

Placeholder Image cap
Kaart titel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

  • Een item
  • Een tweede item
  • Een derde item
Kaartlink Nog een link 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Voeg een optionele kop- en/of voettekst toe aan een kaart.

Aanbevolen
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Kaartkoppen kunnen worden gestyled door elementen toe .card-headerte voegen <h*>.

Aanbevolen
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Citaat

Een bekend citaat, vervat in een blockquote-element.

Iemand die beroemd is in Brontitel 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Aanbevolen
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan
2 dagen geleden 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Maatvoering

Kaarten gaan ervan uit dat er geen specifieke widthstart is, dus ze zullen 100% breed zijn, tenzij anders vermeld. U kunt dit naar behoefte wijzigen met aangepaste CSS, rasterklassen, raster Sass-mixins of hulpprogramma's.

Rasteropmaak gebruiken

Gebruik het raster om kaarten zo nodig in kolommen en rijen te wikkelen.

Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Hulpprogramma's gebruiken

Gebruik ons ​​handvol beschikbare formaathulpprogramma's om snel de breedte van een kaart in te stellen.

Kaart titel

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Knop
Kaart titel

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Knop 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Aangepaste CSS gebruiken

Gebruik aangepaste CSS in uw stylesheets of als inline-stijlen om een ​​breedte in te stellen.

Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tekstuitlijning

U kunt de tekstuitlijning van elke kaart snel wijzigen - in zijn geheel of specifieke delen - met onze tekstuitlijningsklassen .

Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Speciale titelbehandeling

Met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Ergens heengaan 
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Afbeeldingen

Kaarten bevatten een aantal opties voor het werken met afbeeldingen. Kies uit het toevoegen van "beeldkapjes" aan beide uiteinden van een kaart, het overlappen van afbeeldingen met kaartinhoud of het eenvoudig insluiten van de afbeelding in een kaart.

Afbeeldingskappen

Net als kop- en voetteksten, kunnen kaarten boven- en onder "afbeeldingskappen" bevatten: afbeeldingen aan de boven- of onderkant van een kaart.

Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden

Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Afbeeldingsoverlays

Verander een afbeelding in een kaartachtergrond en bedek de tekst van uw kaart. Afhankelijk van de afbeelding heb je al dan niet extra stijlen of hulpprogramma's nodig.

Placeholder Card image
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Houd er rekening mee dat de inhoud niet groter mag zijn dan de hoogte van de afbeelding. Als de inhoud groter is dan de afbeelding, wordt de inhoud buiten de afbeelding weergegeven.

Horizontaal

Met behulp van een combinatie van raster- en nutsklassen kunnen kaarten op een mobielvriendelijke en responsieve manier horizontaal worden gemaakt. In het onderstaande voorbeeld verwijderen we de rastergoten met .g-0en gebruiken we .col-md-*klassen om de kaart horizontaal te maken op het mdbreekpunt. Afhankelijk van de inhoud van uw kaart kunnen verdere aanpassingen nodig zijn.

Placeholder Image
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kaartstijlen

Kaarten bevatten verschillende opties voor het aanpassen van hun achtergronden, randen en kleur.

Achtergrond en kleur

Gebruik hulpprogramma's voor tekstkleur en achtergrond om het uiterlijk van een kaart te wijzigen.

kop
Primaire kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Secundaire kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van succeskaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van de gevarenkaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel waarschuwingskaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel infokaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van lichte kaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Donkere kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.

Grens

Gebruik randhulpprogramma's om alleen de border-colorkaart van een kaart te wijzigen. Houd er rekening mee dat u .text-{color}klassen op de ouder .cardof een subset van de inhoud van de kaart kunt plaatsen, zoals hieronder wordt weergegeven.

kop
Primaire kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Secundaire kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van succeskaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van de gevarenkaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel waarschuwingskaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel infokaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Titel van lichte kaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

kop
Donkere kaarttitel

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins-hulpprogramma's

U kunt ook de randen op de kaartkoptekst en -voettekst naar wens wijzigen en zelfs verwijderen background-colormet .bg-transparent.

kop
Titel van succeskaart

Een korte voorbeeldtekst om op de titel van de kaart voort te bouwen en het grootste deel van de inhoud van de kaart te vormen.

voettekst 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Kaart lay-out

Naast het stylen van de inhoud binnen kaarten, bevat Bootstrap een aantal opties voor het opmaken van reeksen kaarten. Vooralsnog zijn deze indelingsopties nog niet responsive .

Kaart groepen

Gebruik kaartgroepen om kaarten weer te geven als een enkel, gekoppeld element met kolommen met gelijke breedte en hoogte. Kaartgroepen beginnen gestapeld en worden gebruikt display: flex;om aan elkaar te hechten met uniforme afmetingen vanaf het smbreekpunt.

Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden

Placeholder Image cap
Kaart titel

Deze kaart heeft onderstaande ondersteunende tekst als een natuurlijke inleiding tot aanvullende inhoud.

Laatst bijgewerkt 3 minuten geleden

Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze kaart heeft een nog langere inhoud dan de eerste die die actie van gelijke hoogte laat zien.

Laatst bijgewerkt 3 minuten geleden

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Als u kaartgroepen met voetteksten gebruikt, wordt hun inhoud automatisch uitgelijnd.

Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden
Placeholder Image cap
Kaart titel

Deze kaart heeft onderstaande ondersteunende tekst als een natuurlijke inleiding tot aanvullende inhoud.

Laatst bijgewerkt 3 minuten geleden
Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze kaart heeft een nog langere inhoud dan de eerste die die actie van gelijke hoogte laat zien.

Laatst bijgewerkt 3 minuten geleden 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Rasterkaarten

Gebruik het Bootstrap-rastersysteem en zijn .row-colsklassen om te bepalen hoeveel rasterkolommen (om uw kaarten gewikkeld) u per rij laat zien. Hier .row-cols-1legt u bijvoorbeeld de kaarten op één kolom en .row-cols-md-2splitst u vier kaarten op gelijke breedte over meerdere rijen, vanaf het gemiddelde breekpunt.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Als je gelijke hoogte nodig hebt, voeg dan toe .h-100aan de kaarten. Als u standaard gelijke hoogtes wilt, kunt u dit instellen $card-height: 100%in Sass.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Placeholder Image cap
Kaart titel

Dit is een korte kaart.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud.

Placeholder Image cap
Kaart titel

Dit is een langere kaart met onderstaande ondersteunende tekst als natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Net als bij kaartgroepen, worden kaartvoetteksten automatisch uitgelijnd.

Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze inhoud is iets langer.

Laatst bijgewerkt 3 minuten geleden
Placeholder Image cap
Kaart titel

Deze kaart heeft onderstaande ondersteunende tekst als een natuurlijke inleiding tot aanvullende inhoud.

Laatst bijgewerkt 3 minuten geleden
Placeholder Image cap
Kaart titel

Dit is een bredere kaart met ondersteunende tekst hieronder als een natuurlijke inleiding tot aanvullende inhoud. Deze kaart heeft een nog langere inhoud dan de eerste die die actie van gelijke hoogte laat zien.

Laatst bijgewerkt 3 minuten geleden 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Metselwerk

In v4we gebruikten een CSS-only techniek om het gedrag van Masonry - achtige kolommen na te bootsen, maar deze techniek bracht veel onaangename bijwerkingen met zich mee . Als u dit type lay-out in wilt hebben v5, kunt u gewoon gebruik maken van de Masonry-plug-in. Metselwerk is niet opgenomen in Bootstrap , maar we hebben een demovoorbeeld gemaakt om u op weg te helpen.

Sass

Variabelen

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;