Bootstrap 5kort

Kort

Bootstrap 5-kort är kantade rutor med inre marginaler runt innehållet. Det inkluderar rubrik, fot, innehåll, färger och andra alternativ.

Grundläggande kort

Ett grundläggande kort är skapat med .card Klass skapad, innehållet i kortet har en .card-body Klass:

Exempel

<div class="card">
  <div class="card-body">Grundläggande kort</div>
</div>

Prova själv

Huvud och fot

.card-header Lägg till titel på kort genom att använda klassen.card-footer Lägg till fot på kort genom att använda klassen

Exempel

<div class="card">
  <div class="card-header">Huvud</div>
  <div class="card-body">Innehåll</div>
  <div class="card-footer">Fot</div>
</div>

Prova själv

Kontextkort

För att lägga till bakgrundsfärg på kortet, använd kontextklasser:

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

Exempel

Prova själv

titel, text och länk

Använd .card-title Lägg till kortets titel till vilket som helst titelkomponent. Om <p> element är .card-body Den sista underkomponenten (eller den enda underkomponenten), då .card-text Klassen används för att ta bort <p> Elementets nedre kantmarginal..card-link Lägg till blå färg och hover-effekt till alla länkar med klassen.

Exempel

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Korttitel</h4>
    <p class="card-text">Några exempeltexter. Några exempeltexter.</p>
    <a href="#" class="card-link">Kortlänk</a>
    <a href="#" class="card-link">En annan länk</a>
  </div>
</div>

Prova själv

kortbild

Lägg till .card-img-top eller .card-img-bottom Lägg till i <img>，kan bilden placeras på kortets topp eller botten.

Observera att vi har lagt till bilden utanför .card-body för att täcka hela bredden:

Exempel

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Kortbild">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates är en programmerare och ingenjör. Några exempeltexter. Några exempeltexter.</p>
    <a href="#" class="btn btn-primary">Visa personlig profil</a>
  </div>
</div>

Prova själv

Kortbildsöverlappning

Konvertera bilden till kortbakgrund och använd .card-img-overlay Lägg till text på bilden överst:

Exempel

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Kortbild">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Några exempeltexter. Några exempeltexter.</p>
    <a href="#" class="btn btn-primary">Visa personlig profil</a>
  </div>
</div>

Prova själv