Source

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 .

100% x180
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=".../100px180/" 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.

Bildkappe [100%x180]

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=".../100px180/?text=Image cap" 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.

Bildkappe [100%x180]
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=".../100px180/?text=Image cap" 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>

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.

100% x180
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

100% x180 
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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.

100% x 270
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=".../100px270/#55595c:#373a3c/text:Card image" 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är 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
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

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Grenz

Benotzen Grenz Utilities just der border-colorvun enger Kaart ze änneren. Bedenkt datt Dir .text-{color}Klassen op d'Elteren .cardoder en Ënnerdeel vun den Inhalter vun der Kaart setzen, wéi hei ënnendrënner.

Header
Primär 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
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 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

Dir kënnt och d'Grenzen op der Kaart Header an Fousszeilen änneren wéi néideg, a souguer ewechzehuelen hir background-colormat .bg-transparent.

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.

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

Zousätzlech fir den Inhalt a Kaarten ze styléieren, enthält Bootstrap e puer Méiglechkeeten fir eng Serie vu Kaarten auszeleeën. Fir de Moment sinn dës Layoutoptiounen nach net reaktiounsfäeger .

Kaart Gruppen

Benotzt Kaartegruppen fir Kaarten als eenzegt, befestegt Element mat gläiche Breet- an Héichtekolonnen ze maachen. Kaartegruppen benotzen display: flex;fir hir eenheetlech Gréisst z'erreechen.

100% x180
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

100% x180
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

100% x180
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-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Wann Dir Kaartegruppen mat Fousszeilen benotzt, gëtt hiren Inhalt automatesch opgestallt.

100% x180
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
100% x180
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
100% x180
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-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Kaartespill

Braucht Dir e Set vu gläiche Breet- an Héichtkaarten déi net matenee verbonne sinn? Benotzen Kaartdecken.

100% x 200
Kaart Titel

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

Fir d'lescht virun 3 Minutten aktualiséiert

100% x 200
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

100% x 200
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-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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 wéi mat Kaartegruppen, Kaarte Fousszeilen an Deck ginn automatesch opgestallt.

100% x180
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
100% x180
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
100% x180
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-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Kaart Saile

Kaarte kënnen an Masonry -ähnleche Sailen mat just CSS organiséiert ginn andeems se se an .card-columns. Kaarte si mat CSS columnEegeschafte gebaut amplaz Flexbox fir méi einfach Ausrichtung. Kaarte gi vun uewe bis ënnen a lénks no riets bestallt.

Kapp erop! Äre Kilometerpunkten mat Kaarte Saile kënnen variéieren. Fir ze verhënneren, datt d'Kaarte iwwer d'Kolonn briechen, musse mir se setzen display: inline-blockals column-break-inside: avoidnach keng bulletproof Léisung.

100% x160
Kaart Titel datt op eng nei Linn wraps

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

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

Een berühmten am Source Titel
100% x160
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.

Een berühmten am Source Titel
Kaart Titel

Dës Kaart huet e regelméissegen Titel a kuerze Paragraphe vum Text drënner.

Fir d'lescht virun 3 Minutten aktualiséiert

100% x 260

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 aner Kaart mat Titel an ënnerstëtzend Text hei drënner. Dës Kaart huet e puer zousätzlech Inhalter fir et e bësse méi héich ze maachen.

Fir d'lescht virun 3 Minutten aktualiséiert

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

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 Tierm 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;
  }
}