Karty je možné skládat vedle sebe. Je možné je uzavřít do skupin, nebo rozložit na stránku samostatně. Pokud v kartách používáme patičky, délka karet se u všech zarovná. Při umisťování karet lze také využít grid.

Skupiny karet

Karty můžeme seskupit. Budou se nám zobrazovat vedle sebe a nebude mezi nimi mezera. Karty si lze samozřejmě dále nastavovat a upravovat.

Titulek

Text karty 1, která se nachází ve skupině karet.

Vytvořeno 26. 8.

Titulek

Text karty 2, která se nachází ve skupině karet.

Vytvořeno 26. 8.

Titulek

Text karty 3, která se nachází ve skupině karet.

Vytvořeno 26. 8.

<div class="card-group" style="text-align:center;">
  <div class="card">
    <img src="#" class="card-img-top" alt="...">
    <div class="card-body">
       <h5 class="card-title">Titulek</h5>
       <p class="card-text">Text karty 1, která se nachází ve skupině karet.</p>
    </div>
    <div class="card-footer">
       <p class="card-text"><small class="text-muted">Vytvořeno 26. 8.</small></p>
    </div>
    </div>
  <div class="card">
    <img src="#" class="card-img-top" alt="...">
    <div class="card-body">
       <h5 class="card-title">Titulek</h5>
       <p class="card-text">Text karty 2, která se nachází ve skupině karet.</p>
    </div>
    <div class="card-footer">
      <p class="card-text"><small class="text-muted" >Vytvořeno 26. 8.</small></p>
    </div>
    </div>
  <div class="card">
    <img src="#" class="card-img-top" alt="...">
    <div class="card-body">
       <h5 class="card-title">Titulek</h5>
       <p class="card-text">Text karty 3, která se nachází ve skupině karet.</p>
    </div>
    <div class="card-footer">
       <p class="card-text"><small class="text-muted">Vytvořeno 26. 8.</small></p>
    </div>
    </div>
</div>

Samostatné karty

Karty je možné na stránce rozmístit vedle sebe i samostatně (nebudou uzavřeny do jedné skupiny).

Titulek

Text karty 1, která se NEnachází ve skupině.

Vytvořeno 26. 8.

Titulek

Text karty 1, která se NEnachází ve skupině.

Vytvořeno 26. 8.

<div class="card-deck">
  <div class="card">
    <img src="#" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Titulek</h5>
      <p class="card-text">Text karty 1, která se NEnachází ve skupině.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Vytvořeno 26. 8.</small>
    </div>
  </div>
  <div class="card">
    <img src="#" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Titulek</h5>
      <p class="card-text">Text karty 1, která se NEnachází ve skupině.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Vytvořeno 26. 8.</small>
    </div>
  </div>
</div>

Grid

Karty můžeme řadit i pomocí gridu. Rozložení určujeme v prvním řádku u div pro všechny karty a poté u div pro každou samostatnou kartu.

Titulek

Tato karta se nachází jako první vlevo nahoře.

Titulek

Tato karta se nachází jako druhá vpravo nahoře.

Titulek

Tato karta se nachází jako třetí vlevo dole.

Titulek

A tato karta se nachází jako čtvrtá vpravo dole a je díky textu o malinko delší, než ostatní.

<div class="row row-cols-1 row-cols-md-2" style="width:80%;">
  <div class="col mb-4">
    <div class="card">
      <img src="#" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Titulek</h5>
        <p class="card-text">Tato karta se nachází jako první vlevo nahoře.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="#" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Titulek</h5>
        <p class="card-text">Tato karta se nachází jako druhá vpravo nahoře.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="#" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Titulek</h5>
        <p class="card-text">Tato karta se nachází jako třetí vlevo dole.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="#" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Titulek</h5>
        <p class="card-text">A tato karta se nachází jako čtvrtá vpravo dole a je díky textu o malinko delší, než ostatní.</p>
      </div>
    </div>
  </div>
</div>