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 .

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

html

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

html

<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

html

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

html

<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

html

<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

html

<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

html

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

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

html

<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>

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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

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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

Toegevoegd in v5.2.0

Stel een background-colormet contrasterende voorgrond colorin met onze .text-bg-{color}helpers . Voorheen was het nodig om uw keuze van .text-{color}en .bg-{color}hulpprogramma's handmatig te koppelen voor styling, die u nog steeds kunt gebruiken als u dat wilt.

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.

html

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

html

<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

html

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

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

html

<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

html

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

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.

html

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

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.

html

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

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.

html

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

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

html

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

CSS

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken kaarten nu lokale CSS .card-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass-variabelen

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;

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

Rasterkaarten

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel