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 .

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

html

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

html

<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

html

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

html

<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

html

<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

html

<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

html

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

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

html

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

Kop- en fuottekst

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

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

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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

Taheakke yn v5.2.0

Stel in background-colormei kontrastearjende foargrûn colormei ús .text-bg-{color}helpers . Earder wie it ferplicht om jo kar fan styling .text-{color}en .bg-{color}nutsfoarsjenningen manuell te koppelen, dy't jo noch kinne brûke as jo leaver.

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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

html

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

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

html

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

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

html

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

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.

html

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

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.

html

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

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.

html

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

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

html

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

CSS

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke kaarten no lokale CSS-fariabelen op .cardfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass fariabelen

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;

Kaarten

Oer

Foarbyld

Kaart titel

Soarten ynhâld

Lichem

Titels, tekst en keppelings

Kaart titel

Kaart ûndertitel

Ofbyldings

List groepen

Goatstien

Kaart titel

Kop- en fuottekst

Spesjale titel behanneling

Featured

Spesjale titel behanneling

Spesjale titel behanneling

Sizing

Mei help fan grid markup

Spesjale titel behanneling

Spesjale titel behanneling

Utilities brûke

Kaart titel

Kaart titel

Mei help fan oanpaste CSS

Spesjale titel behanneling

Tekst alignment

Spesjale titel behanneling

Spesjale titel behanneling

Spesjale titel behanneling

Navigaasje

Spesjale titel behanneling

Spesjale titel behanneling

Ofbyldings

Image caps

Kaart titel

Kaart titel

Ofbylding oerlays

Kaart titel

Horizontaal

Kaart titel

Kaartstilen

Eftergrûn en kleur

Primêre kaart titel

Sekundêre kaart titel

Sukses kaart titel

Danger card titel

Warskôging card titel

Info card titel

Light card titel

Dark card titel

Betsjutting oerbringe oan assistinte technologyen

Grins

Primêre kaart titel

Sekundêre kaart titel

Sukses kaart titel

Danger card titel

Warskôging card titel

Info card titel

Light card titel

Dark card titel

Mixins nutsbedriuwen

Sukses kaart titel

Kaart yndieling

Kaart groepen

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Rasterkaarten

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel