Karty můžeme využít jakkoliv se nám zlíbí. Je možné je upravovat – jejich velikost, jejich obsah a také jak se obsah zobrazuje.

Zde je příklad jednoduché karty:

<div class="card" style="width: 18rem;">
  <img src="#" class="card-img-top" alt="#">
  <div class="card-body">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Sem si můžete vepsat text, který budete chtít na kartě zobrazit.</p>
    <a href="#" class="btn btn-outline-primary">Tlačítko</a>
  </div>
</div>

A zde výsledek, do kterého jsme doplnili obrázek a odkaz do tlačítka:

Titulek

Sem si můžete vepsat text, který budete chtít na kartě zobrazit.

Tlačítko

Do karty si můžeme přidat víc nadpisů, odstranit je, odstranit i obrázek a dělat spoustu dalších úprav.

Hlavička a patička

<div class="card" style="width: 18rem;">
  <img src="#" alt="#">
  <div class="card-header">
    Hlavička
  </div>
  <div class="card-body">
    Tělo
  </div>
  <div class="card-footer" style="text-align: end;">
    Patička
  </div>
</div>

Hlavička

Zde vidíme tělo karty, nad kterým se nachází hlavička a pod kterým se nachází patička. Kterýkoliv z těchto prvků lze vynechat. Vynechat lze i obrázek nad hlavičkou, nebo ho lze pod ni přesunout. Text těla je také zarovnán na střed a patička je zarovnána na pravou stranu.

Patička

Nadpisy

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Nadpis</h5>
    <h6 class="card-subtitle mb-2 text-muted">Podnadpis</h6>
    <p class="card-text">Příklad textu karty, který se objevuje v jejím tělu pod nadpisy.</p>
    <a href="#" class="card-link">Alerts</a>
    <a href="#" class="card-link">Tlačítka</a>
  </div>
</div>

Seznam položek

Do karty můžeme vepsat i seznam položek (položky se můžou chovat i jako odkazy).

<div class="card" style="width: 18rem;">
 <div class="card-header">
    Seznam položek
  </div>
<ul class="list-group list-group-flush">
    <li class="list-group-item">Položka 1</li>
    <li class="list-group-item">Položka 2</li>
    <li class="list-group-item">Položka 3</li>
  </ul>
</div>

Citáty

<div class="card">
  <div class="card-header">
    Citát
  </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>
      <div class="blockquote-footer">Jméno, <cite title="Source Title">Zdroj</cite></div>
    </blockquote>
  </div>
</div>

Menu

Do karty si můžeme v hlavičce přidat i menu. Položky v menu si lze samozřejmě dále nastavovat.

Menu můžeme mít dva typy:

<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="#">Aktivní</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://doc.shipard.app/web/s58">Odkaz</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Vypnuté</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Titulek</h5>
    <p class="card-text">Text karty.</p>
  </div>
</div>

nebo: