Kaarten

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

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 .

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.

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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum bij eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Aanbevolen

Cras justo odio
Dapibus ac facilisis in
Vestibulum bij eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum bij eros

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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Koptekst en voettekst

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" 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" 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.

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

<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-top" 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.

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 .no-guttersen 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.

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 no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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 tekst- en achtergrondhulpprogramma's 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-white 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-white 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 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 .sr-onlyklasse.

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 text-warning">
    <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 text-info">
    <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 gebruiken display: flex;om hun uniforme maatvoering te bereiken.

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

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

Laatst bijgewerkt 3 minuten geleden

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.

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

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

Laatst bijgewerkt 3 minuten geleden

Kaart titel

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>

Kaartspellen

Heb je een set kaarten van gelijke breedte en hoogte nodig die niet aan elkaar zijn bevestigd? Gebruik kaartspellen.

Kaart titel

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

Laatst bijgewerkt 3 minuten geleden

Kaart titel

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

Laatst bijgewerkt 3 minuten geleden

Kaart titel

Laatst bijgewerkt 3 minuten geleden

<div class="card-deck">
  <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>
      <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>

Net als bij kaartgroepen, worden kaartvoetteksten in kaartspellen automatisch uitgelijnd.

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

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

Laatst bijgewerkt 3 minuten geleden

Kaart titel

Laatst bijgewerkt 3 minuten geleden

<div class="card-deck">
  <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.

Kaart titel

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

Kaart titel

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

Kaart titel

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

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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

Kaart titel

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

Kaart titel

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

Kaart titel

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

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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

Kaart titel

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

Kaart titel

Dit is een korte kaart.

Kaart titel

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

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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Kaartkolommen

Kaarten kunnen met alleen CSS worden georganiseerd in Masonry -achtige kolommen door ze in te pakken .card-columns. Kaarten zijn gebouwd met CSS column-eigenschappen in plaats van flexbox voor eenvoudigere uitlijning. Kaarten zijn geordend van boven naar beneden en van links naar rechts.

Kop op! Uw kilometerstand met kaartkolommen kan variëren. Om te voorkomen dat kaarten over kolommen breken, moeten we ze display: inline-blockzo instellen dat column-break-inside: avoiddit nog geen kogelvrije oplossing is.

Kaarttitel die doorloopt in een nieuwe regel

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

Iemand die beroemd is in Brontitel

Kaart titel

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

Laatst bijgewerkt 3 minuten geleden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Iemand die beroemd is in Brontitel

Kaart titel

Deze kaart heeft een gewone titel en een korte alinea met tekst eronder.

Laatst bijgewerkt 3 minuten geleden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

Iemand die beroemd is in Brontitel

Kaart titel

Dit is nog een kaart met titel en ondersteunende tekst hieronder. Deze kaart heeft wat extra inhoud om hem over het algemeen iets groter te maken.

Laatst bijgewerkt 3 minuten geleden

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kaartkolommen kunnen ook worden uitgebreid en aangepast met wat extra code. Hieronder wordt een uitbreiding van de .card-columnsklasse weergegeven met dezelfde CSS die we gebruiken - CSS-kolommen - om een set responsieve lagen te genereren voor het wijzigen van het aantal kolommen.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kaarten

Over

Voorbeeld

Kaart titel

Inhoudstypen

Lichaam

Titels, tekst en links

Kaart titel

Kaart ondertitel

Afbeeldingen

Lijst groepen

Gootsteen

Kaart titel

Koptekst en voettekst

Speciale titelbehandeling

Aanbevolen

Speciale titelbehandeling

Speciale titelbehandeling

Maatvoering

Rasteropmaak gebruiken

Speciale titelbehandeling

Speciale titelbehandeling

Hulpprogramma's gebruiken

Kaart titel

Kaart titel

Aangepaste CSS gebruiken

Speciale titelbehandeling

Tekstuitlijning

Speciale titelbehandeling

Speciale titelbehandeling

Speciale titelbehandeling

Navigatie

Speciale titelbehandeling

Speciale titelbehandeling

Afbeeldingen

Afbeeldingskappen

Kaart titel

Kaart titel

Afbeeldingsoverlays

Kaart titel

Horizontaal

Kaart titel

Kaartstijlen

Achtergrond en kleur

Primaire kaarttitel

Secundaire kaarttitel

Titel van succeskaart

Titel van de gevarenkaart

Titel waarschuwingskaart

Titel infokaart

Titel van lichte kaart

Donkere kaarttitel

Betekenis overbrengen aan ondersteunende technologieën

Grens

Primaire kaarttitel

Secundaire kaarttitel

Titel van succeskaart

Titel van de gevarenkaart

Titel waarschuwingskaart

Titel infokaart

Titel van lichte kaart

Donkere kaarttitel

Mixins-hulpprogramma's

Titel van succeskaart

Kaart lay-out

Kaart groepen

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaartspellen

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Rasterkaarten