Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
in English

karty

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

Na tejto stránke

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, 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-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
Päta karty 
<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
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">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ým úvodom k ďalšiemu obsahu.

Í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ým úvodom k ďalšiemu obsahu.

Í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ým úvodom k ďalšiemu obsahu.

Í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ým úvodom k ďalšiemu obsahu.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzeným úvodom k ďalšiemu obsahu.

Í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ým úvodom k ďalšiemu obsahu.

Tlačidlo
Názov karty

S podporným textom nižšie ako prirodzeným úvodom k ďalšiemu obsahu.

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ým úvodom k ďalšiemu obsahu.

Í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ým úvodom k ďalšiemu obsahu.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzeným úvodom k ďalšiemu obsahu.

Ísť niekam
Špeciálne spracovanie titulu

S podporným textom nižšie ako prirodzeným úvodom k ďalšiemu obsahu.

Í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-end" 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ým úvodom k ďalšiemu obsahu.

Í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" aria-current="true" 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ým úvodom k ďalšiemu obsahu.

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

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 horizontálne prispôsobené mobilným a citlivým spôsobom. V nižšie uvedenom príklade odstránime mriežkové odkvapy .g-0a 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.

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 g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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 farbu textu a pomocné programy na pozadí .

Hlavička
Hlavný názov 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-dark 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-dark 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 text-dark 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 .visually-hiddentriedou.

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
Hlavný názov 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">
    <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">
    <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.

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

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>
    </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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Rovnako ako pri skupinách kariet sa päty kariet automaticky zarovnajú.

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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Murárstvo

Na napodobnenie správania stĺpov podobných murivev4 sme použili techniku ​​iba CSS , ale táto technika mala veľa nepríjemných vedľajších účinkov . Ak chcete mať tento typ rozloženia v , stačí použiť doplnok Masonry. Masonry nie je súčasťou Bootstrap , ale vytvorili sme ukážkový príklad , ktorý vám pomôže začať.v5

Sass

Premenné

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;