Bootstrap 5 kortit

Kortti

Bootstrap 5:n kortti on reunallinen kehys, jonka sisältö ympärillä on jonkin verran sisätilaa. Se sisältää otsikon, jalkan, sisällön, värejä ja muita valintoja.

Peruskortti

Peruskortti on .card Luokalla luodut, kortin sisältöllä on .card-body Luokka:

Esimerkki

Lisää sinne luokkaa
  <div class="card-body">Peruskortti</div>
</div>

Kokeile itse

Otsikko ja jalka

.card-header Lisää kortille otsikko luokalla:.card-footer Lisää kortille jalka luokalla:

Esimerkki

Lisää sinne luokkaa
  <div class="card-header">Otsikko</div>
  <div class="card-body">Sisältö</div>
  <div class="card-footer">Jalka</div>
</div>

Kokeile itse

Kontekstikortti

Jos haluat lisätä kortille taustavärin, käytä kontekstiluokkaa:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Esimerkki

Kokeile itse

otsikko, teksti ja linkki

Käytä .card-title Lisää kortin otsikko mihin tahansa otsikkoelementtiin. Jos Luokka poistaa elementti on .card-body Viimeinen alisuunnitelman elementti (tai ainoa alisuunnitelman elementti), .card-text .card-text Luokka poistaa <p>Elementin alareuna .card-link

Esimerkki

Lisää sinne luokkaa
  <div class="card-body">
    <div class="card">
    <h4 class="card-title">Kortin otsikko</h4>
    <p class="card-text">Joitakin esimerkkitekstejä. Joitakin esimerkkitekstejä.</p>
    <a href="#" class="card-link">Kortin linkki</a>
  </div>
</div>

Kokeile itse

<a href="#" class="card-link">Toinen linkki</a>

Kortin kuva .card-img-top tai .card-img-bottom Lisää <img>Voit sijoittaa kuvan kortin ylä- tai alapuolelle.

Huomaa, että lisäsimme kuvan .card-body ulkopuolelle, jotta se kattaa koko leveyden:

Esimerkki

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Kortin kuva">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates on ohjelmoija ja insinööri. Joitakin esimerkkitekstejä. Joitakin esimerkkitekstejä.</p>
    <a href="#" class="btn btn-primary">Näytä henkilökohtainen profiili</a>
  </div>
</div>

Kokeile itse

Kortin kuvan päivitys

Muunna kuva kortin taustaksi ja käytä .card-img-overlay Lisää teksti kuvan yläpuolelle:

Esimerkki

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Kortin kuva">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Joitakin esimerkkitekstejä. Joitakin esimerkkitekstejä.</p>
    <a href="#" class="btn btn-primary">Näytä henkilökohtainen profiili</a>
  </div>
</div>

Kokeile itse