Karty

Karty Bootstrapu poskytují flexibilní a rozšiřitelný kontejner obsahu s mnoha variantami a možnostmi.

O

Karta je flexibilní a rozšiřitelný kontejner obsahu . Obsahuje možnosti pro záhlaví a zápatí, širokou škálu obsahu, kontextové barvy pozadí a výkonné možnosti zobrazení. Pokud znáte Bootstrap 3, karty nahrazují naše staré panely, jamky a miniatury. Podobné funkce jako tyto komponenty jsou dostupné jako modifikační třídy pro karty.

Příklad

Karty jsou vytvořeny s co nejmenším množstvím značek a stylů, ale přesto dokážou poskytnout spoustu kontroly a přizpůsobení. Postaveny s flexboxem, nabízejí snadné zarovnání a dobře se mísí s ostatními komponenty Bootstrap. Ve výchozím nastavení nemají žádné margin, takže podle potřeby použijte nástroje pro nastavení mezer .

Níže je uveden příklad základní karty se smíšeným obsahem a pevnou šířkou. Karty nemají na začátku pevnou šířku, takže přirozeně vyplní celou šířku nadřazeného prvku. To lze snadno přizpůsobit pomocí našich různých možností velikosti .

Název karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Jít někam

<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í širokou škálu obsahu, včetně obrázků, textu, skupin seznamů, odkazů a dalších. Níže jsou uvedeny příklady toho, co je podporováno.

Tělo

Stavebním kamenem karty je .card-body. Použijte jej vždy, když potřebujete polstrovanou sekci na kartě.

Toto je nějaký text v těle karty.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titulky, text a odkazy

Názvy karet se používají přidáním .card-titledo <h*>štítku. Stejným způsobem se odkazy přidávají a umísťují vedle sebe přidáním .card-linkdo <a>značky.

Titulky se používají přidáním a .card-subtitleke <h*>značce. Pokud jsou .card-titlepoložky .card-subtitlea umístěny v .card-bodypoložce, název karty a podnadpis jsou pěkně zarovnány.

Název karty

Titulky karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Odkaz na kartu Další 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-topumístí obrázek do horní části karty. Pomocí .card-textlze na kartu přidat text. Text uvnitř .card-textlze také upravovat pomocí standardních značek HTML.

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří větš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>

Seznam skupin

Vytvářejte seznamy obsahu na kartě pomocí skupiny flush list.

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erosu

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

Nejlepší

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erosu

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

Dřez

Kombinujte a spojujte různé typy obsahu a vytvořte kartu, kterou potřebujete, nebo tam dejte vše. Níže jsou zobrazeny styly obrázků, bloky, styly textu a skupina seznamů – vše zabaleno do karty s pevnou šířkou.

Název karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Cras justo odio
Dapibus ac facilisis v
Vestibulum na erosu

Odkaz na kartu Další 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>

Záhlaví a zápatí

Přidejte na kartu volitelné záhlaví a/nebo zápatí.

Nejlepší

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

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

Záhlaví karet lze upravit přidáním .card-headerprvků <h*>.

Nejlepší

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

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

Citát

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

Někdo slavný 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>

Nejlepší

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

před 2 dny

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

Dimenzování

Karty nepředpokládají žádný konkrétní widthzačátek, takže pokud není uvedeno jinak, budou 100% široké. Můžete to změnit podle potřeby pomocí vlastních CSS, tříd mřížky, mixů mřížky Sass nebo utilit.

Použití mřížkového značení

Pomocí mřížky obalte karty podle potřeby do sloupců a řad.

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

<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žívání utilit

K rychlému nastavení šířky karty použijte naši hrstku dostupných nástrojů pro úpravu velikosti .

Název karty

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Knoflík

Název karty

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Knoflík

<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žití vlastního CSS

Použijte vlastní CSS ve svých šablonách stylů nebo jako vložené styly pro nastavení šířky.

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

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

Zarovnání textu

Pomocí našich tříd zarovnání textu můžete rychle změnit zarovnání textu libovolné karty – celé nebo určitých částí .

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

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

Přidejte navigaci do záhlaví (nebo bloku) karty pomocí navigačních komponent Bootstrapu .

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

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

Speciální titulní zpracování

S doprovodným textem níže jako přirozeným návodem k dalšímu obsahu.

Jít někam

<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í několik možností pro práci s obrázky. Vyberte si mezi připojením „uzávěrů obrázku“ na kterýkoli konec karty, překrytím obrázků obsahem karty nebo jednoduše vložením obrázku na kartu.

Čepice obrázků

Podobně jako záhlaví a zápatí mohou karty obsahovat horní a dolní „obrázky“ – obrázky v horní nebo spodní části karty.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

<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-top" alt="...">
</div>

Překryvné obrázky

Proměňte obrázek na pozadí karty a překryjte text karty. V závislosti na obrázku můžete nebo nemusíte potřebovat další styly nebo nástroje.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

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

Pamatujte, že obsah by neměl být větší než výška obrázku. Pokud je obsah větší než obrázek, zobrazí se mimo obrázek.

Horizontální

Pomocí kombinace tříd mřížky a užitných vlastností lze karty vyrobit vodorovně, a to způsobem, který je vhodný pro mobilní zařízení a reaguje. V níže uvedeném příkladu odstraníme mřížkové okapy .no-guttersa použijeme .col-md-*třídy, aby byla karta v mdzarážce vodorovná. V závislosti na obsahu karty mohou být nutné další úpravy.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

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

Styly karet

Karty obsahují různé možnosti přizpůsobení jejich pozadí, ohraničení a barvy.

Pozadí a barva

Ke změně vzhledu karty použijte nástroje pro text a pozadí .

Záhlaví

Název primární karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název sekundární karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název karty úspěchu

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název karty nebezpečí

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název výstražné karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název informační karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název lehké karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název tmavé karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří větš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>

Předávání významu asistenčním technologiím

Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.

okraj

Použijte hraniční nástroje ke změně pouze border-colorkarty. Všimněte si, že můžete umístit .text-{color}třídy na nadřazený prvek .cardnebo podmnožinu obsahu karty, jak je znázorněno níže.

Záhlaví

Název primární karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název sekundární karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název karty úspěchu

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název karty nebezpečí

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název výstražné karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název informační karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název lehké karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Záhlaví

Název tmavé karty

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří větš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

Podle potřeby můžete také změnit okraje v záhlaví a zápatí karty a dokonce je odstranit background-colorpomocí .bg-transparent.

Záhlaví

Název karty úspěchu

Několik rychlých příkladů textu, který bude stavět na názvu karty a tvoří většinu obsahu karty.

Zápatí

<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žení karty

Kromě stylování obsahu v kartách obsahuje Bootstrap několik možností pro rozložení sérií karet. V současné době tyto možnosti rozložení ještě nereagují .

Skupiny karet

Skupiny karet použijte k vykreslení karet jako jednoho připojeného prvku se sloupci stejné šířky a výšky. Skupiny karet používají display: flex;k dosažení jejich jednotné velikosti.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

Název karty

Tato karta má níže podpůrný text jako přirozený návod k dalšímu obsahu.

Naposledy aktualizováno před 3 minutami

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tato karta má ještě delší obsah než ta první a ukazuje akci ve stejné výšce.

Naposledy aktualizováno před 3 minutami

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

Při použití skupin karet se zápatím se jejich obsah automaticky zarovná.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

Název karty

Tato karta má níže podpůrný text jako přirozený návod k dalšímu obsahu.

Naposledy aktualizováno před 3 minutami

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tato karta má ještě delší obsah než ta první a ukazuje akci ve stejné výšce.

Naposledy aktualizováno před 3 minutami

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

Potřebujete sadu karet stejné šířky a výšky, které nejsou k sobě připojeny? Používejte balíčky karet.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

Název karty

Tato karta má níže podpůrný text jako přirozený návod k dalšímu obsahu.

Naposledy aktualizováno před 3 minutami

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tato karta má ještě delší obsah než ta první a ukazuje akci ve stejné výšce.

Naposledy aktualizováno před 3 minutami

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

Stejně jako u skupin karet se zápatí karet v balíčcích automaticky seřadí.

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tento obsah je trochu delší.

Naposledy aktualizováno před 3 minutami

Název karty

Tato karta má níže podpůrný text jako přirozený návod k dalšímu obsahu.

Naposledy aktualizováno před 3 minutami

Název karty

Toto je širší karta s podpůrným textem níže jako přirozený návod k dalšímu obsahu. Tato karta má ještě delší obsah než ta první a ukazuje akci ve stejné výšce.

Naposledy aktualizováno před 3 minutami

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

Mřížkové karty

Pomocí mřížkového systému Bootstrap a jeho .row-colstříd určete, kolik sloupců mřížky (omotaných kolem vašich karet) zobrazíte na řádku. Zde je například .row-cols-1rozložení karet na jeden sloupec a .row-cols-md-2rozdělení čtyř karet na stejnou šířku ve více řádcích, od středního bodu zlomu nahoru.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

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

Změňte to na .row-cols-3a uvidíte obal čtvrté karty.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

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

Když potřebujete stejnou výšku, přidejte .h-100do karet. Pokud chcete ve výchozím nastavení stejné výšky, můžete je nastavit $card-height: 100%v Sass.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

Název karty

Toto je krátká karta.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu.

Název karty

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

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

Sloupce karet

Karty lze uspořádat do sloupců podobných zednářství pouze pomocí CSS tak, že je zabalíte do .card-columns. Karty jsou vytvořeny s columnvlastnostmi CSS namísto flexboxu pro snadnější zarovnání. Karty jsou seřazeny shora dolů a zleva doprava.

Hlavy vzhůru! Váš počet najetých kilometrů se sloupci karty se může lišit. Abychom zabránili rozbití karet přes sloupce, musíme je nastavit na, display: inline-blockprotože column-break-inside: avoidto zatím není neprůstřelné řešení.

Název karty, který se zalomí na nový řádek

Toto je delší karta s doprovodným textem níže jako přirozený úvod k dalšímu obsahu. Tento obsah je trochu delší.

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

Někdo slavný v Source Title

Název karty

Tato karta má níže podpůrný text jako přirozený návod k dalšímu obsahu.

Naposledy aktualizováno před 3 minutami

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

Někdo slavný v Source Title

Název karty

Tato karta má pravidelný nadpis a pod sebou krátký odstavec textu.

Naposledy aktualizováno před 3 minutami

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

Někdo slavný v Source Title

Název karty

Toto je další karta s názvem a doprovodným textem níže. Tato karta má nějaký další obsah, aby byla celkově o něco vyšší.

Naposledy aktualizováno před 3 minutami

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

Sloupce karet lze také rozšířit a přizpůsobit pomocí nějakého dalšího kódu. Níže je znázorněno rozšíření .card-columnstřídy pomocí stejného CSS, které používáme – sloupce CSS – ke generování sady responzivních vrstev pro změnu počtu sloupců.

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

Karty

O

Příklad

Název karty

Typy obsahu

Tělo

Titulky, text a odkazy

Název karty

Titulky karty

snímky

Seznam skupin

Dřez

Název karty

Záhlaví a zápatí

Speciální titulní zpracování

Nejlepší

Speciální titulní zpracování

Speciální titulní zpracování

Dimenzování

Použití mřížkového značení

Speciální titulní zpracování

Speciální titulní zpracování

Používání utilit

Název karty

Název karty

Použití vlastního CSS

Speciální titulní zpracování

Zarovnání textu

Speciální titulní zpracování

Speciální titulní zpracování

Speciální titulní zpracování

Navigace

Speciální titulní zpracování

Speciální titulní zpracování

snímky

Čepice obrázků

Název karty

Název karty

Překryvné obrázky

Název karty

Horizontální

Název karty

Styly karet

Pozadí a barva

Název primární karty

Název sekundární karty

Název karty úspěchu

Název karty nebezpečí

Název výstražné karty

Název informační karty

Název lehké karty

Název tmavé karty

Předávání významu asistenčním technologiím

okraj

Název primární karty

Název sekundární karty

Název karty úspěchu

Název karty nebezpečí

Název výstražné karty

Název informační karty

Název lehké karty

Název tmavé karty

Mixins utility

Název karty úspěchu

Rozložení karty

Skupiny karet

Název karty

Název karty

Název karty

Název karty

Název karty

Název karty

Balíčky karet

Název karty

Název karty

Název karty

Název karty

Název karty

Název karty

Mřížkové karty