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 margin
Standard, 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 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.
<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-title
un 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-link
un en <a>
Tag bäigefüügt ginn.
Ënnertitelen ginn benotzt andeems en en .card-subtitle
zu engem <h*>
Tag bäigefüügt gëtt. Wann d' .card-title
an d' .card-subtitle
Elementer an engem .card-body
Element 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-top
plazéiert e Bild uewen op der Kaart. Mat .card-text
, Text kann op d'Kaart dobäi ginn. Text bannent .card-text
kann 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 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>
- 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
<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.
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
<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>
Header a Fousszeilen
Füügt en optionalen Header an / oder Fousszeilen an enger Kaart.
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-header
Dir <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>
E bekannten Zitat, an engem Blockquote Element enthale.
<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>
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">
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 width
unzefä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 iergendwouSpecial 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äppchenKaart 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 iergendwouSpecial Titel Behandlung
Mat Ënnerstëtzung vum Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.
Gitt iergendwouSpecial 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>
Navigatioun
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">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.
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 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.
<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>
Horizontal
Mat enger Kombinatioun vu Gitter an Utility Klassen 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 .no-gutters
a benotzen .col-md-*
Klassen der Kaart horizontal um md
breakpoint ze maachen. Weider Upassunge kënnen néideg sinn ofhängeg vun Ärem Kaartinhalt.
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 no-gutters">
<div class="col-md-4">
<img src="..." 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 Text an Hannergrond Utilities fir d'Erscheinung vun enger Kaart z'änneren.
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.
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.
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.
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.
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.
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.
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.
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-only
Klass.
Grenz
Benotzen Grenz Utilities just der border-color
vun enger Kaart ze änneren. Bedenkt datt Dir .text-{color}
Klassen op d'Elteren .card
oder en Ënnerdeel vun den Inhalter vun der Kaart setzen, wéi hei ënnendrënner.
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.
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.
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.
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.
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.
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.
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.
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-color
mat .bg-transparent
.
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.
<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 sm
Breakpoint ufänken.
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ës Kaart huet Ënnerstëtzung Text hei ënnendrënner als natierleche Virsprong op zousätzlech Inhalt.
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ë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.
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.
Kaart Titel
Dës Kaart huet Ënnerstëtzung Text hei ënnendrënner als natierleche Virsprong op zousätzlech Inhalt.
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.
<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>
Kaartespill
Braucht Dir e Set vu gläiche Breet- an Héichtkaarten déi net matenee verbonne sinn? Benotzen Kaartdecken.
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
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
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Just wéi mat Kaartegruppen, Kaarte Fousszeilen an Deck ginn automatesch opgestallt.
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.
Kaart Titel
Dës Kaart huet Ënnerstëtzung Text hei ënnendrënner als natierleche Virsprong op zousätzlech Inhalt.
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.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Gitter Kaarten
Benotzt de Bootstrap Gittersystem a seng .row-cols
Klassen fir ze kontrolléieren wéi vill Gitterkolonnen (wéckelt ronderëm Är Kaarten) Dir pro Zeil weist. Zum Beispill, hei .row-cols-1
leeën d'Kaarte op enger Kolonn aus, a .row-cols-md-2
verdeelt véier Kaarten op d'selwecht Breet iwwer verschidde Reihen, vum mëttleren Breakpoint erop.
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.
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.
Kaart Titel
Dëst ass eng méi laang Kaart mat ënnerstëtzend Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.
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">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Ännert et op .row-cols-3
an Dir gesitt déi véiert Kaart wrap.
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.
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.
Kaart Titel
Dëst ass eng méi laang Kaart mat ënnerstëtzend Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.
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">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Wann Dir braucht gläich Héicht, dobäi .h-100
op d'Kaarte. Wann Dir gläich Héichten als Standard wëllt, kënnt Dir $card-height: 100%
an Sass setzen.
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.
Kaart Titel
Dëst ass eng kuerz Kaart.
Kaart Titel
Dëst ass eng méi laang Kaart mat ënnerstëtzend Text hei drënner als natierleche Virsprong op zousätzlech Inhalter.
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">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Kaart Saile
Kaarte kënnen a Masonry -ähnleche Sailen mat just CSS organiséiert ginn andeems se se a wéckelen .card-columns
. Kaarte si mat CSS column
Eegeschafte 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-block
als column-break-inside: avoid
nach keng bulletproof Léisung.
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.
E bekannten Zitat, an engem Blockquote Element enthale.
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
E bekannten Zitat, an engem Blockquote Element enthale.
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
E bekannten Zitat, an engem Blockquote Element enthale.
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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-columns
Klass 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;
}
}