Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Kaarten

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

Op dëser Säit

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 .

Placeholder Image cap
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 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>

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.

Placeholder Image cap

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

Lëscht Gruppen

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

  • En Artikel
  • En zweeten Element
  • En drëtten Element
<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>
Ausgezeechent
  • En Artikel
  • En zweeten Element
  • En drëtten Element
<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>
  • En Artikel
  • En zweeten Element
  • En drëtten Element
Kaart Fousszeilen 
<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>

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.

Placeholder Image cap
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.

  • En Artikel
  • En zweeten Element
  • En drëtten Element
Card Link Anere Link 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

E bekannten Zitat, an engem Blockquote Element enthale.

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

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

Placeholder Image cap
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

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

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.

Placeholder Card image
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 src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Bedenkt datt den Inhalt net méi grouss ass wéi d'Héicht vum Bild. Wann den Inhalt méi grouss ass wéi d'Bild, gëtt den Inhalt ausserhalb vum Bild ugewisen.

Horizontal

Mat enger Kombinatioun vu Gitter an Utilityklassen kënnen d'Kaarte horizontal op eng mobilfrëndlech a reaktiounsfäeg Manéier gemaach ginn. Am Beispill hei ënnen ewechzehuelen mir d'Gitter gutters mat .g-0a benotzen .col-md-*Klassen der Kaart horizontal um mdbreakpoint ze maachen. Weider Upassunge kënnen néideg sinn ofhängeg vun Ärem Kaartinhalt.

Placeholder Image
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" 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>

Kaart Stiler

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

Hannergrond a Faarf

Benotzt Textfaarf 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-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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 .visually-hiddenKlass.

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">
    <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 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 fänken u gestapelt un a benotze display: flex;fir mat eenheetleche Dimensiounen ugeschloss ze ginn, déi um smBreakpoint ufänken.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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 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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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 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>

Gitter Kaarten

Benotzt de Bootstrap Gittersystem a seng .row-colsKlassen fir ze kontrolléieren wéi vill Gitterkolonnen (wéckelt ronderëm Är Kaarten) Dir pro Zeil weist. Zum Beispill, hei .row-cols-1leeën d'Kaarte op enger Kolonn aus, a .row-cols-md-2verdeelt véier Kaarten op d'selwecht Breet iwwer verschidde Reihen, vum mëttleren Breakpoint erop.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Kaart Titel

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

Placeholder Image cap
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.

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

Ännert et op .row-cols-3an Dir gesitt déi véiert Kaart wrap.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Kaart Titel

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

Placeholder Image cap
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.

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

Wann Dir braucht gläich Héicht, dobäi .h-100op d'Kaarte. Wann Dir gläich Héichten als Standard wëllt, kënnt Dir $card-height: 100%an Sass setzen.

Placeholder Image cap
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.

Placeholder Image cap
Kaart Titel

Dëst ass eng kuerz Kaart.

Placeholder Image cap
Kaart Titel

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

Placeholder Image cap
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.

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

Just wéi mat Kaartegruppen, wäerte Kaarte Fousszeilen automatesch opstellen.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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="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>

Mauerwierk

A v4mir hunn eng CSS-nëmmen Technik benotzt fir d'Behuele vu Masonry - ähnleche Sailen ze mimikéieren, awer dës Technik koum mat villen onsympathesche Nebenwirkungen . Wann Dir wëllt dës Zort Layout an v5, Dir kënnt just benotzen Steemetzerei Plugin maachen. Masonry ass net am Bootstrap abegraff , awer mir hunn en Demo-Beispill gemaach fir Iech ze hëllefen unzefänken.

Sass

Variablen

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;