Kaarten

Bootstrap Kaarte bidden e flexibelen an erweiterbaren Inhaltsbehälter mat verschidde Varianten an Optiounen.

Iwwer

Eng Kaart ass e flexibelen an erweiderbare Inhaltsbehälter. Et enthält Optiounen fir Header a Fousszeilen, eng grouss Varietéit vun Inhalter, kontextuellen Hannergrondfaarwen a mächteg Displayoptiounen. Wann Dir mat Bootstrap 3 vertraut sidd, ersetzen d'Kaarte eis al Panelen, Brunnen a Miniaturbiller. Ähnlech Funktionalitéit zu dëse Komponenten ass verfügbar als Modifikateur Klassen fir Kaarte.

Beispill

Kaarte si mat esou wéineg Markup a Stiler wéi méiglech gebaut, awer et verwalten nach ëmmer eng Tonn vu Kontroll a Personnalisatioun ze liwweren. Gebaut mat Flexbox, si bidden einfach Ausrichtung a mëschen gutt mat anere Bootstrap Komponenten. Si hu keng marginStandard, also benotzt Abstands Utilities wéi néideg.

Drënner ass e Beispill vun enger Basiskaart mat gemëschten Inhalt an enger fixer Breet. Kaarte hu keng fix Breet unzefänken, sou datt se natierlech déi voll Breet vu sengem Elterendeel fëllen. Dëst ass einfach personaliséiert mat eise verschiddene Gréisstoptiounen .

Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Gitt iergendwou

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Inhalt Zorte

Kaarte ënnerstëtzen eng grouss Varietéit vun Inhalt, dorënner Biller, Text, Lëscht Gruppen, Linken, a méi. Drënner sinn Beispiller vu wat ënnerstëtzt gëtt.

Kierper

De Bausteen vun enger Kaart ass d' .card-body. Benotzt et wann Dir eng gepolstert Sektioun an enger Kaart braucht.

Dëst ass e puer Text bannent enger Kaart Kierper.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titelen, Text a Linken

Kaarttitele gi benotzt andeems se .card-titleun engem <h*>Tag bäigefüügt ginn. Op déiselwecht Manéier ginn d'Links bäigefüügt an niewentenee plazéiert andeems se .card-linkun en <a>Tag bäigefüügt ginn.

Ënnertitelen ginn benotzt andeems en en .card-subtitlezu engem <h*>Tag bäigefüügt gëtt. Wann d' .card-titlean d' .card-subtitleElementer an engem .card-bodyElement gesat ginn, sinn d'Kaarttitel an d'Ënnertitel gutt ausgeriicht.

Kaart Titel

Kaart Ënnertitel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Card Link Anere 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>

Biller

.card-img-topplazéiert e Bild uewen op der Kaart. Mat .card-text, Text kann op d'Kaart dobäi ginn. Text bannent .card-textkann och mat de Standard HTML Tags stylesch ginn.

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Lëscht Gruppen

Erstellt Lëschte vum Inhalt op enger Kaart mat enger Spulllëschtgrupp.

Cras justo Odio
Dapibus ac facilisis in
Vestibulum an 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>

Ausgezeechent

Cras justo Odio
Dapibus ac facilisis in
Vestibulum an 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>

Kichen ënnerzegoen

Mix a passt verschidde Inhaltstypen fir d'Kaart ze kreéieren déi Dir braucht, oder werft alles dohinner. Hei ënnendrënner sinn Bildstiler, Blocken, Textstiler an eng Lëschtgrupp - all an enger fixer Breet Kaart gewéckelt.

Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Cras justo Odio
Dapibus ac facilisis in
Vestibulum an Eros

Card Link Anere Link

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Header a Fousszeilen

Füügt en optionalen Header an / oder Fousszeilen an enger Kaart.

Ausgezeechent

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

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

Card Header kënne styléiert ginn andeems .card-headerDir <h*>Elementer bäigefüügt.

Ausgezeechent

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

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

Zitat

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

Een berühmten am Source Titel

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

Ausgezeechent

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

virun 2 Deeg

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

Gréisst

Kaarte huelen net spezifesch widthunzefänken, sou datt se 100% breet sinn, wann net anescht uginn. Dir kënnt dëst änneren wéi néideg mat personaliséierten CSS, Gitterklassen, Gitter Sass Mixins oder Utilities.

Gitter Markup benotzen

Benotzt de Gitter, wéckelt d'Kaarte a Kolonnen a Reihen wéi néideg.

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

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

Utilities benotzen

Benotzt eis Handvoll verfügbar Gréisst Utilities fir séier d'Breet vun enger Kaart ze setzen.

Kaart Titel

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Knäppchen

Kaart Titel

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Knäppchen

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

Benotzt Custom CSS

Benotzt personaliséiert CSS an Äre Stylesheets oder als Inline Stiler fir eng Breet ze setzen.

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

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

Text Ausrichtung

Dir kënnt d'Textausrichtung vun all Kaart séier änneren - a senger ganzer oder spezifescher Deeler - mat eisen Textausrichtungsklassen .

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

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

Füügt e puer Navigatioun un den Header (oder Block) vun enger Kaart mat Bootstrap's Nav Komponenten .

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

<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="#">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>

Special Titel Behandlung

Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.

Gitt iergendwou

<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="#">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>

Biller

Kaarte enthalen e puer Méiglechkeeten fir mat Biller ze schaffen. Wielt aus "Bildkappen" op all Enn vun enger Kaart ze addéieren, Biller mat Kaartinhalt ze iwwerlageren, oder einfach d'Bild an enger Kaart embetten.

Bild Kappen

Ähnlech wéi Header a Fousszeilen kënnen d'Kaarte uewen an ënnen "Bildkappen" enthalen - Biller uewen oder ënnen vun enger Kaart.

Kaart Titel

Dëst ass eng méi breet Kaart mat ënnerstëtzend Text hei ënnen als en natierleche Virsprong op zousätzlech Inhalt. Dësen Inhalt ass e bësse méi laang.

Fir d'lescht virun 3 Minutten aktualiséiert

Kaart Titel

Dëst ass eng méi breet Kaart mat ënnerstëtzend Text hei ënnen als en natierleche Virsprong op zousätzlech Inhalt. Dësen Inhalt ass e bësse méi laang.

Fir d'lescht virun 3 Minutten aktualiséiert

<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

Bild Iwwerlagerungen

Maacht e Bild an e Kaarthannergrond an iwwerlagert den Text vun Ärer Kaart. Ofhängeg vum Bild, braucht Dir oder vläicht net zousätzlech Stiler oder Utilities.

Kaart Titel

Dëst ass eng méi breet Kaart mat ënnerstëtzend Text hei ënnen als en natierleche Virsprong op zousätzlech Inhalt. Dësen Inhalt ass e bësse méi laang.

Fir d'lescht virun 3 Minutten aktualiséiert

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

Kaart Stiler

Kaarte enthalen verschidde Méiglechkeeten fir hir Hannergrënn, Grenzen a Faarf ze personaliséieren.

Hannergrond a Faarf

Benotzt Text an Hannergrond Utilities fir d'Erscheinung vun enger Kaart z'änneren.

Header

Primärkaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Secondaire Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Erfolleg Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Gefor Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Warnung Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Info Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Luucht Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

Header

Däischter Kaart Titel

E puer séier Beispill Text fir op de Kaarttitel ze bauen an de gréissten Deel vum Inhalt vun der Kaart auszemaachen.

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

Bedeitung vun Hëllefstechnologien

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Border

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

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

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

When using card groups with footers, their content will automatically line up.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Just like with card groups, card footers in decks will automatically line up.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Fir d'lescht virun 3 Minutten aktualiséiert

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

Een berühmten am Source Titel

Kaart Titel

Dës Kaart huet Ënnerstëtzung Text hei ënnendrënner als natierleche Virsprong op zousätzlech Inhalt.

Fir d'lescht virun 3 Minutten aktualiséiert

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

Een berühmten am Source Titel

Kaart Titel

Dëst ass eng méi breet Kaart mat ënnerstëtzend Text hei ënnen als en natierleche Virsprong op zousätzlech Inhalt. Dës Kaart huet nach méi laang Inhalt wéi déi éischt déi gläich Héicht Aktioun ze weisen.

Fir d'lescht virun 3 Minutten aktualiséiert

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

Card Saile kann och mat e puer zousätzlech Code verlängert a personaliséiert ginn. Hei ënnen ass eng Ausdehnung vun der .card-columnsKlass mat der selwechter CSS déi mir benotzen - CSS Kolonnen - fir eng Rei vu reaktiounsfäeger Niveauen ze generéieren fir d'Zuel vun de Kolonnen z'änneren.

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