karty

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 .

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, text a odkazy

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-subtitledo <h*>značky. 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.

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.

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erose

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Odporúčané

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erose

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erose

Päta karty

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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.

Názov karty

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

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erose

Odkaz na kartu Ďalší odkaz

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Hlavička a päta

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ť

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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

pred 2 dňami

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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í pre 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.

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

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

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 horizontálne prispôsobené mobilným a citlivým spôsobom. V nižšie uvedenom príklade odstránime mriežkové odkvapy .no-guttersa použijeme .col-md-*triedy, aby bola karta v mdbode prerušenia vodorovná. V závislosti od obsahu karty môžu byť potrebné ďalšie úpravy.

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="..." class="card-img" 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.

Päta

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

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

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

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

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

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

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

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

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

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.

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

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

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

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ší.

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ší.

Názov karty

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

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.

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ší.

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ší.

Názov karty

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

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 to nastaviť $card-height: 100%v Sass.

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ší.

Názov karty

Toto je krátka karta.

Názov karty

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

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 je možné 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.

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ší.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Niekto slávny v Source Title

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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;
  }
}

karty

O

Príklad

Názov karty

Typy obsahu

Telo

Názvy, text a odkazy

Názov karty

Podnadpis karty

snímky

Zoznam skupín

Kuchynský drez

Názov karty

Hlavička a päta

Špeciálne spracovanie titulu

Odporúčané

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Dimenzovanie

Použitie mriežkového označenia

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Používanie pomôcok

Názov karty

Názov karty

Použitie vlastného CSS

Špeciálne spracovanie titulu

Zarovnanie textu

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

Navigácia

Špeciálne spracovanie titulu

Špeciálne spracovanie titulu

snímky

Obrázkové čiapky

Názov karty

Názov karty

Prekryvné obrázky

Názov karty

Horizontálne

Názov karty

Štýly kariet

Pozadie a farba

Názov hlavnej karty

Názov sekundárnej karty

Názov karty úspechu

Názov karty nebezpečenstva

Názov výstražnej karty

Názov informačnej karty

Názov svetlej karty

Tmavý názov karty

Odovzdanie významu asistenčným technológiám

Hranica

Názov hlavnej karty

Názov sekundárnej karty

Názov karty úspechu

Názov karty nebezpečenstva

Názov výstražnej karty

Názov informačnej karty

Názov svetlej karty

Tmavý názov karty

Mixins utility

Názov karty úspechu

Rozloženie karty

Skupiny kariet

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Balíčky kariet

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Názov karty

Grid karty