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 class="card-img-top" src="..." alt="Card image cap">
  <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.

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 class="card-img-top" src="..." alt="Card image cap">
  <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>

Featured

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

Card link In oare keppeling

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.

Immen ferneamd yn Boarne Titel

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

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 helpprogramma's foar grutte om fluch de breedte fan in kaart 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-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>

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="#">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="#">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 class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

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.

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

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

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 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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 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.

Immen ferneamd yn Boarne Titel

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.

Immen ferneamd yn Boarne Titel

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 erat in ante.

Immen ferneamd yn Boarne Titel

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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

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

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

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

Card decks

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Kaart titel

Card kolommen

Card titel dy't wraps nei in nije rigel

Kaart titel