Kaarten
Bootstrap's kaarten jouwe in fleksibele en útwreide ynhâldkontainer mei meardere farianten en opsjes.
Oer
In kaart is in fleksibele en útbreidbere ynhâld container. It omfettet opsjes foar kop- en fuotteksten, in breed ferskaat oan ynhâld, kontekstuele eftergrûnkleuren, en krêftige werjefteopsjes. As jo bekend binne mei Bootstrap 3, ferfange kaarten ús âlde panielen, putten en thumbnails. Fergelykbere funksjonaliteit oan dy komponinten is beskikber as modifier klassen foar kaarten.
Foarbyld
Kaarten wurde boud mei sa min mooglik markup en stilen, mar dochs beheare te leverjen in ton fan kontrôle en maatwurk. Boud mei flexbox, se biede maklike ôfstimming en mingje goed mei oare Bootstrap-komponinten. Se hawwe gjin marginstandert, dus brûk spacing utilities as nedich.
Hjirûnder is in foarbyld fan in basis kaart mei mingde ynhâld en in fêste breedte. Kaarten hawwe gjin fêste breedte om te begjinnen, sadat se natuerlik de folsleine breedte fan har âlderelemint folje. Dit is maklik oanpast mei ús ferskate grutte opsjes .
Kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Earne hinne gean<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>Soarten ynhâld
Kaarten stypje in breed ferskaat oan ynhâld, ynklusyf ôfbyldings, tekst, listgroepen, keppelings, en mear. Hjirûnder binne foarbylden fan wat wurdt stipe.
Lichem
It boublok fan in kaart is de .card-body. Brûk it as jo in opknapte seksje nedich binne binnen in kaart.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Titels, tekst en keppelings
Kaarttitels wurde brûkt troch tafoeging .card-titleoan in <h*>tag. Op deselde wize wurde keppelings tafoege en neist elkoar pleatst troch ta te foegjen .card-linkoan in <a>tag.
Undertitels wurde brûkt troch in taheakjen .card-subtitleoan in <h*>tag. As de .card-titleen de .card-subtitleitems wurde pleatst yn in .card-bodyitem, de kaart titel en ûndertitel wurde ôfstimd moai.
Kaart titel
Kaart ûndertitel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Card link In oare keppeling<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>Ofbyldings
.card-img-toppleatst in ôfbylding oan de top fan de kaart. Mei .card-textkin tekst tafoege wurde oan de kaart. Tekst binnen .card-textkin ek styleare wurde mei de standert HTML-tags.
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
<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>List groepen
Meitsje listen mei ynhâld yn in kaart mei in flush list groep.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum en 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>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum en 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>Goatstien
Mix en kombinearje meardere ynhâldstypen om de kaart te meitsjen dy't jo nedich binne, of smyt alles deryn. Hjirûnder binne ôfbyldingsstilen, blokken, tekststilen en in listgroep werjûn - allegear ferpakt yn in kaart mei fêste breedte.
Kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum en eros
<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">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>Kop- en fuottekst
Foegje in opsjonele kop- en/of foettekst ta binnen in kaart.
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Kaartkoppen kinne wurde styleare troch tafoeging .card-headeroan <h*>eleminten.
Featured
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.
<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>Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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>Sizing
Kaarten nimme gjin spesifyk widthoan om te begjinnen, dus se sille 100% breed wêze, útsein as oars oanjûn. Jo kinne dit as nedich feroarje mei oanpaste CSS, rasterklassen, raster Sass-mixins, of nutsbedriuwen.
Mei help fan grid markup
Mei help fan it raster, wrap kaarten yn kolommen en rigen as nedich.
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne geanSpesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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 brûke
Brûk ús hantsjefol beskikbere helpprogramma's foar grutte om fluch de breedte fan in kaart yn te stellen.
<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>Mei help fan oanpaste CSS
Brûk oanpaste CSS yn jo stylblêden of as ynline-stilen om in breedte yn te stellen.
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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>Tekst alignment
Jo kinne de tekstôfstimming fan elke kaart fluch feroarje - yn syn gehiel as spesifike dielen - mei ús tekstôfstimmingsklassen .
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne geanSpesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne geanSpesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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>Navigaasje
Foegje wat navigaasje ta oan de koptekst (of blok) fan in kaart mei de nav-komponinten fan Bootstrap .
Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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="#" tabindex="-1" aria-disabled="true">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>Spesjale titel behanneling
Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.
Earne hinne gean<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="#" tabindex="-1" aria-disabled="true">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>Ofbyldings
Kaarten befetsje in pear opsjes foar wurkjen mei ôfbyldings. Kies út it tafoegjen fan "ôfbyldingskappen" oan beide einen fan in kaart, ôfbyldings oerlizze mei kaartynhâld, of gewoan de ôfbylding yn in kaart ynbêde.
Image caps
Fergelykber mei kop- en fuotteksten kinne kaarten boppe- en ûnderste "ôfbyldingskappen" omfetsje - ôfbyldings oan 'e boppe- of ûnderkant fan in kaart.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lêst bywurke 3 minuten lyn
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lêst bywurke 3 minuten lyn
<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-top" alt="...">
</div>Ofbylding oerlays
Feroarje in ôfbylding yn in kaarteftergrûn en oerlaapje de tekst fan jo kaart. Ofhinklik fan 'e ôfbylding kinne jo al of net ekstra stilen of nutsbedriuwen nedich hawwe.
<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>Tink derom dat ynhâld net grutter wêze moat as de hichte fan 'e ôfbylding. As ynhâld grutter is dan de ôfbylding sil de ynhâld bûten de ôfbylding werjûn wurde.
Horizontaal
Mei in kombinaasje fan raster- en nutklassen kinne kaarten horizontaal makke wurde op in mobylfreonlike en responsive manier. Yn it foarbyld hjirûnder, wy fuortsmite de grid gutters mei .no-guttersen brûke .col-md-*klassen foar in make de kaart horizontaal op it mdbreakpoint. Fierdere oanpassingen kinne nedich wêze ôfhinklik fan jo kaartynhâld.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lêst bywurke 3 minuten lyn
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" 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>Kaartstilen
Kaarten omfetsje ferskate opsjes foar it oanpassen fan har eftergrûnen, rânen en kleur.
Eftergrûn en kleur
Brûk tekst- en eftergrûnhelpprogramma's om it uterlik fan in kaart te feroarjen.
Primêre kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Sekundêre kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Sukses kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Danger card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Warskôging card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Info card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Light card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Dark card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
<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>Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.
Grins
Brûk grins nutsbedriuwen te feroarjen krekt de border-colorfan in kaart. Tink derom dat jo kinne sette .text-{color}klassen op 'e âlder .cardof in subset fan' e kaart ynhâld lykas werjûn hjirûnder.
Primêre kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Sekundêre kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Sukses kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Danger card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Warskôging card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Info card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Light card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
Dark card titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
<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 nutsbedriuwen
Jo kinne ek feroarje de grinzen op de kaart kop- en fuottekst as nedich, en sels fuortsmite harren background-colormei .bg-transparent.
Sukses kaart titel
Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.
<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 yndieling
Neist it styljen fan de ynhâld binnen kaarten, omfettet Bootstrap in pear opsjes foar it pleatsen fan searjes fan kaarten. Foar it momint binne dizze yndielingsopsjes noch net reageare .
Kaart groepen
Brûk kaartgroepen om kaarten te werjaan as ien, taheakke elemint mei gelikense breedte- en hichtekolommen. Kaartgroepen brûke display: flex;om har unifoarme grutte te berikken.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lêst bywurke 3 minuten lyn
Kaart titel
Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Lêst bywurke 3 minuten lyn
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze kaart hat noch langer ynhâld as de earste dy't sjen litte dat gelikense hichte aksje.
Lêst bywurke 3 minuten lyn
<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>By it brûken fan kaartgroepen mei fuotteksten, sil har ynhâld automatysk line up.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze kaart hat noch langer ynhâld as de earste dy't sjen litte dat gelikense hichte aksje.
<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>Card decks
Need in set fan gelikense breedte en hichte kaarten dy't net hechte oan inoar? Brûk card decks.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lêst bywurke 3 minuten lyn
Kaart titel
Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Lêst bywurke 3 minuten lyn
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze kaart hat noch langer ynhâld as de earste dy't sjen litte dat gelikense hichte aksje.
Lêst bywurke 3 minuten lyn
<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>Krekt as by kaartgroepen sille kaartfuotteksten yn decks automatysk line up.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Kaart titel
Dit is in bredere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze kaart hat noch langer ynhâld as de earste dy't sjen litte dat gelikense hichte aksje.
<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>Rasterkaarten
Brûk it Bootstrap-rastersysteem en syn .row-colsklassen om te kontrolearjen hoefolle rasterkolommen (om jo kaarten ferpakt) jo per rige sjen litte. Bygelyks, hjir .row-cols-1lizze de kaarten op ien kolom, en .row-cols-md-2splitst fjouwer kaarten op deselde breedte oer meardere rigen, fan it medium brekpunt omheech.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
<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>Feroarje it nei .row-cols-3en jo sille de fjirde kaartwrap sjen.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
<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>As jo nedich hawwe gelikense hichte, tafoegje .h-100oan de kaarten. As jo standert gelikense hichten wolle, kinne jo $card-height: 100%yn Sass ynstelle.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Kaart titel
Dit is in koarte kaart.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Kaart titel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
<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>Card kolommen
Kaarten kinne wurde organisearre yn masonry -like kolommen mei gewoan CSS troch wrapping se yn .card-columns. Kaarten wurde boud mei CSS columneigenskippen ynstee fan flexbox foar makliker alignment. Kaarten wurde besteld fan boppe nei ûnderen en fan links nei rjochts.
Heads up! Jo kilometers mei card kolommen kin fariearje. Om foar te kommen dat kaarten oer kolommen brekke, moatte wy se ynstelle display: inline-blockas column-break-inside: avoidnoch gjin kûgelfeilige oplossing.
Card titel dy't wraps nei in nije rigel
Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld. Dizze ynhâld is in bytsje langer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.
Kaart titel
Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.
Lêst bywurke 3 minuten lyn
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere tiid.
Kaart titel
Dizze kaart hat in gewoane titel en koarte alinea fan tekst derûnder.
Lêst bywurke 3 minuten lyn
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.
Kaart titel
Dit is in oare kaart mei titel en stypjende tekst hjirûnder. Dizze kaart hat wat ekstra ynhâld om it yn 't algemien wat heger te meitsjen.
Lêst bywurke 3 minuten lyn
<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>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 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
</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 kolommen kinne ek útwreide en oanpast mei wat ekstra koade. Hjirûnder werjûn is in útwreiding fan 'e .card-columnsklasse mei deselde CSS dy't wy brûke - CSS-kolommen - om in set fan responsive lagen te generearjen foar it feroarjen fan it oantal kolommen.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}