Bootstrapové karty poskytujú flexibilný a rozšíriteľný kontajner obsahu s viacerými variantmi a možnosťami.

O

Karta je flexibilný a rozšíriteľný kontajner obsahu . Obsahuje možnosti pre hlavičky a päty, širokú škálu obsahu, kontextové farby pozadia a výkonné možnosti zobrazenia. Ak poznáte Bootstrap 3, karty nahrádzajú naše staré panely, jamky a miniatúry. Podobné funkcie ako tieto komponenty sú dostupné ako modifikátorové triedy pre karty.

Príklad

Karty sú vytvorené s čo najmenším množstvom značiek a štýlov, no stále dokážu poskytnúť množstvo kontroly a prispôsobenia. Postavené s flexboxom, ponúkajú jednoduché zarovnanie a dobre sa miešajú s ostatnými komponentmi Bootstrap. V predvolenom nastavení nemajú žiadne margin, takže podľa potreby použite nástroje na vytváranie rozstupov .

Nižšie je uvedený príklad základnej karty so zmiešaným obsahom a pevnou šírkou. Karty nemajú na začiatku žiadnu pevnú šírku, takže prirodzene vyplnia celú šírku nadradeného prvku. To sa dá ľahko prispôsobiť pomocou našich rôznych možností veľkosti .

Placeholder Image cap
Názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Ísť niekam
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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>

Typy obsahu

Karty podporujú širokú škálu obsahu vrátane obrázkov, textu, skupín zoznamov, odkazov a ďalších. Nižšie sú uvedené príklady toho, čo je podporované.

Telo

Stavebným kameňom karty je .card-body. Použite ho vždy, keď potrebujete polstrovanú časť na karte.

Toto je nejaký text v tele karty.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Názvy kariet sa používajú pridaním .card-titlek <h*>štítku. Rovnakým spôsobom sa odkazy pridávajú a umiestňujú vedľa seba pridaním .card-linkdo <a>značky.

Titulky sa používajú pridaním a .card-subtitlek <h*>značke. Ak sú .card-titlepoložky .card-subtitlea umiestnené v .card-bodypoložke, názov karty a podnadpis sú pekne zarovnané.

Názov karty
Podnadpis karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Odkaz na kartu Ďalší odkaz
<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>

snímky

.card-img-topumiestni obrázok na vrch karty. Pomocou .card-text, môžete na kartu pridať text. Text vo vnútri .card-textmôže byť tiež štylizovaný pomocou štandardných značiek HTML.

Placeholder Image cap

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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

Zoznam skupín

Vytvorte zoznamy obsahu na karte pomocou skupiny flush list.

  • Vec
  • Druhá položka
  • Tretia položka
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Odporúčané
  • Vec
  • Druhá položka
  • Tretia položka
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Vec
  • Druhá položka
  • Tretia položka
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Kuchynský drez

Zmiešajte a spojte viacero typov obsahu, aby ste vytvorili kartu, ktorú potrebujete, alebo tam vložte všetko. Nižšie sú zobrazené štýly obr��zkov, bloky, štýly textu a skupina zoznamov – všetko zabalené do karty s pevnou šírkou.

Placeholder Image cap
Názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

  • Vec
  • Druhá položka
  • Tretia položka
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Pridajte voliteľnú hlavičku a/alebo pätu na kartu.

Odporúčané
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>

.card-headerHlavičky kariet je možné upraviť pridaním <h*>prvkov.

Odporúčané
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>
Citovať

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Odporúčané
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>

Dimenzovanie

Karty nepredpokladajú žiadny konkrétny widthzačiatok, takže ak nie je uvedené inak, budú 100 % široké. Môžete to zmeniť podľa potreby pomocou vlastných CSS, tried mriežky, mixov mriežky Sass alebo pomôcok.

Použitie mriežkového označenia

Pomocou mriežky obalte karty podľa potreby do stĺpcov a riadkov.

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>

Používanie pomôcok

Na rýchle nastavenie šírky karty použite naše množstvo dostupných nástrojov na úpravu veľkosti .

Názov karty

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Tlačidlo
Názov karty

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Tlačidlo
<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>

Použitie vlastného CSS

Na nastavenie šírky použite vlastný CSS vo svojich šablónach so štýlmi alebo ako vložené štýly.

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>

Zarovnanie textu

Pomocou našich tried zarovnania textu môžete rýchlo zmeniť zarovnanie textu ľubovoľnej karty – celej jej alebo konkrétnych častí .

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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>

Pridajte navigáciu do hlavičky (alebo bloku) karty pomocou navigačných komponentov Bootstrapu .

Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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">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>
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzený návod na ďalší obsah.

Ísť niekam
<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">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>

snímky

Karty obsahujú niekoľko možností na prácu s obrázkami. Vyberte si medzi pripájaním „uzáverov obrázkov“ na ktorýkoľvek koniec karty, prekrytím obrázkov obsahom karty alebo jednoduchým vložením obrázka na kartu.

Obrázkové čiapky

Podobne ako hlavičky a päty môžu karty obsahovať horné a spodné „uzávery obrázkov“ – obrázky v hornej alebo dolnej časti karty.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Placeholder Image cap
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-bottom" alt="...">
</div>

Prekryvné obrázky

Premeňte obrázok na pozadie karty a prekryte text karty. V závislosti od obrázka môžete alebo nemusíte potrebovať ďalšie štýly alebo pomôcky.

Placeholder Card image
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <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>
Upozorňujeme, že obsah by nemal byť väčší ako výška obrázka. Ak je obsah väčší ako obrázok, zobrazí sa mimo obrázka.

Horizontálne

Pomocou kombinácie mriežkových a úžitkových tried môžu byť karty vyrobené horizontálne spôsobom, ktorý je vhodný pre mobilné zariadenia a reaguje. V nižšie uvedenom príklade odstránime mriežkové odkvapy .no-guttersa použijeme .col-md-*triedy na to, aby bola karta v mdbode prerušenia vodorovná. V závislosti od obsahu karty môžu byť potrebné ďalšie úpravy.

Placeholder Image
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." alt="...">
    </div>
    <div class="col-md-8">
      <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>
</div>

Štýly kariet

Karty obsahujú rôzne možnosti prispôsobenia ich pozadia, okrajov a farby.

Pozadie a farba

Na zmenu vzhľadu karty použite pomocné programy pre text a pozadie .

Hlavička
Názov hlavnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov sekundárnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov karty nebezpečenstva

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov výstražnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov informačnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov svetlej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Tmavý názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

<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>
Odovzdanie významu asistenčným technológiám

Použitie farby na pridanie významu poskytuje iba vizuálnu indikáciu, ktorá nebude poskytnutá používateľom asistenčných technológií – ako sú čítačky obrazovky. Uistite sa, že informácia označená farbou je buď zrejmá zo samotného obsahu (napr. viditeľný text), alebo je zahrnutá alternatívnymi prostriedkami, ako je dodatočný text skrytý spolu s .sr-onlytriedou.

Hranica

Použite hraničné nástroje na zmenu len border-colorkarty. Všimnite si, že triedy môžete umiestniť .text-{color}na rodiča .cardalebo podmnožinu obsahu karty, ako je uvedené nižšie.

Hlavička
Názov hlavnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov sekundárnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov karty nebezpečenstva

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov výstražnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov informačnej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Názov svetlej karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

Hlavička
Tmavý názov karty

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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

Môžete tiež zmeniť okraje na hlavičke a päte karty podľa potreby a dokonca ich odstrániť background-colorpomocou .bg-transparent.

Hlavička
Názov karty úspechu

Niekoľko rýchlych vzorových textov, ktoré stavajú na názve karty a tvoria väčšinu obsahu karty.

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

Rozloženie karty

Okrem úpravy obsahu v rámci kariet obsahuje Bootstrap niekoľko možností na usporiadanie sérií kariet. Tieto možnosti rozloženia zatiaľ nereagujú .

Skupiny kariet

Skupiny kariet použite na vykreslenie kariet ako jedného pripojeného prvku s rovnakou šírkou a výškou stĺpcov. Skupiny kariet začínajú naskladané a používajú display: flex;sa na pripevnenie s jednotnými rozmermi od smbodu zlomu.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Placeholder Image cap
Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

Naposledy aktualizované pred 3 minútami

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

Pri použití skupín kariet s pätami sa ich obsah automaticky zarovná.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

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

Balíčky kariet

Potrebujete sadu kariet rovnakej šírky a výšky, ktoré nie sú navzájom spojené? Používajte balíčky kariet.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Naposledy aktualizované pred 3 minútami

Placeholder Image cap
Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

Naposledy aktualizované pred 3 minútami

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Rovnako ako pri skupinách kariet, päty kariet v balíčkoch sa automaticky zoradia.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Placeholder Image cap
Názov karty

Toto je širšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Táto karta má ešte dlhší obsah ako prvá, čo ukazuje akciu rovnakej výšky.

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

Grid karty

Pomocou mriežkového systému Bootstrap a jeho .row-colstried môžete ovládať, koľko stĺpcov mriežky (omotaných okolo vašich kariet) zobrazíte na riadok. Tu je napríklad rozloženie .row-cols-1kariet na jeden stĺpec a .row-cols-md-2rozdelenie štyroch kariet na rovnakú šírku vo viacerých riadkoch, od stredného bodu zlomu nahor.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </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">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>
      </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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</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">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>
      </div>
    </div>
  </div>
</div>

Zmeňte ho na .row-cols-3a uvidíte obal štvrtej karty.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </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">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>
      </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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</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">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>
      </div>
    </div>
  </div>
</div>

Keď potrebujete rovnakú výšku, pridajte .h-100do kariet. Ak chcete štandardne rovnaké výšky, môžete ich nastaviť $card-height: 100%v Sass.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Placeholder Image cap
Názov karty

Toto je krátka karta.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu.

Placeholder Image cap
Názov karty

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Stĺpce kariet

Karty možno usporiadať do stĺpcov podobných murive.card-columns iba pomocou CSS tak, že ich zabalíte do . Karty sú vytvorené s columnvlastnosťami CSS namiesto flexboxu pre jednoduchšie zarovnanie. Karty sú zoradené zhora nadol a zľava doprava.

Hlavy hore! Váš počet najazdených kilometrov so stĺpcami na karte sa môže líšiť. Aby sme zabránili rozbitiu kariet v stĺpcoch, musíme ich nastaviť na, display: inline-blockpretože column-break-inside: avoidto zatiaľ nie je nepriestrelné riešenie.

Placeholder Image cap
Názov karty, ktorý sa zalomí do nového riadku

Toto je dlhšia karta s podporným textom nižšie ako prirodzený úvod k ďalšiemu obsahu. Tento obsah je trochu dlhší.

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title
Placeholder Image cap
Názov karty

Táto karta má nižšie uvedený podporný text ako prirodzený návod na ďalší obsah.

Naposledy aktualizované pred 3 minútami

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title
Názov karty

Táto karta má bežný názov a pod ňou krátky odsek textu.

Naposledy aktualizované pred 3 minútami

Placeholder Card image

Známy citát obsiahnutý v prvku blockquote.

Niekto slávny v Source Title
Názov karty

Toto je ďalšia karta s názvom a podporným textom nižšie. Táto karta má nejaký ďalší obsah, aby bola celkovo o niečo vyššia.

Naposledy aktualizované pred 3 minútami

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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>A well-known quote, contained in a blockquote element.</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 src="..." class="card-img-top" alt="...">
    <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>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <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 a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Stĺpce kariet môžu byť tiež rozšírené a prispôsobené pomocou nejakého dodatočného kódu. Nižšie je uvedené rozšírenie .card-columnstriedy pomocou rovnakého CSS, ktorý používame – stĺpce CSS – na generovanie množiny responzívnych vrstiev na zmenu počtu stĺpcov.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}