Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Kaarten

Bootstrap's kaarten jouwe in fleksibele en útwreide ynhâldkontainer mei meardere farianten en opsjes.

Op dizze side

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 .

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

Dit is wat tekst binnen in kaart lichem. 
<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.

Placeholder Image cap

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.

  • In item
  • In twadde item
  • In tredde item
<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>
Featured
  • In item
  • In twadde item
  • In tredde item
<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>
  • In item
  • In twadde item
  • In tredde item
Kaartfoettekst 
<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>

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.

Placeholder Image cap
Kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

  • In item
  • In twadde item
  • In tredde item
Card link In oare keppeling 
<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>

Foegje in opsjonele kop- en/of foettekst ta binnen in kaart.

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

In bekend sitaat, befette yn in blokquote-elemint.

Immen ferneamd yn Boarne 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>
Featured
Spesjale titel behanneling

Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.

Earne hinne gean
2 dagen lyn 
<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 gean
Spesjale 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 maatwurkprogramma's om de breedte fan in kaart fluch yn te stellen.

Kaart titel

Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.

Knop
Kaart titel

Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.

Knop 
<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 gean
Spesjale titel behanneling

Mei stypjende tekst hjirûnder as in natuerlike oanlieding foar ekstra ynhâld.

Earne hinne gean
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>

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

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

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

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>

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.

Placeholder Card image
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 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 .g-0en 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.

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

Kaartstilen

Kaarten omfetsje ferskate opsjes foar it oanpassen fan har eftergrûnen, rânen en kleur.

Eftergrûn en kleur

Brûk tekstkleur en eftergrûnhelpprogramma's om it uterlik fan in kaart te feroarjen.

Koptekst
Primêre kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Sekundêre kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Sukses kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Danger card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Warskôging card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Info card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Light card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
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-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>
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 .visually-hiddenklasse.

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.

Koptekst
Primêre kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Sekundêre kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Sukses kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Danger card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Warskôging card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Info card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
Light card titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Koptekst
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">
    <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 nutsbedriuwen

Jo kinne ek feroarje de grinzen op de kaart kop- en fuottekst as nedich, en sels fuortsmite harren background-colormei .bg-transparent.

Koptekst
Sukses kaart titel

Guon rappe foarbyldtekst om op 'e kaarttitel te bouwen en it grutste part fan' e kaartynhâld út te meitsjen.

Fuottekst 
<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 begjinne steapele en brûke display: flex;om taheakke te wurden mei unifoarme dimensjes begjinnend by it smbrekpunt.

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

Placeholder Image cap
Kaart titel

Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

Lêst bywurke 3 minuten lyn

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

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

Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

Lêst bywurke 3 minuten lyn
Placeholder Image cap
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>
    </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.

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

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

Placeholder Image cap
Kaart titel

Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

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

Feroarje it nei .row-cols-3en jo sille de fjirde kaartwrap sjen.

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

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

Placeholder Image cap
Kaart titel

Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

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

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.

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

Placeholder Image cap
Kaart titel

Dit is in koarte kaart.

Placeholder Image cap
Kaart titel

Dit is in langere kaart mei ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

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

Krekt as by kaartgroepen sille kaartfuotteksten automatysk op rigel stean.

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

Dizze kaart hat ûndersteande tekst as in natuerlike oanlieding foar ekstra ynhâld.

Lêst bywurke 3 minuten lyn
Placeholder Image cap
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="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>

Mitselwurk

Yn v4brûkten wy in CSS-allinich technyk om it gedrach fan Masonry - like kolommen te mimikjen, mar dizze technyk kaam mei in protte onaangename side-effekten . As jo ​​​​dit type yndieling wolle hawwe yn v5, kinne jo gewoan gebrûk meitsje fan Masonry-plugin. Masonry is net opnommen yn Bootstrap , mar wy hawwe in demo-foarbyld makke om jo te helpen te begjinnen.

Sass

Fariabelen

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