Typografie

Ikony (.icon)

NáhledTřída CSS
 .icon-chevron-down
 .icon-chevron-left
 .icon-plus
 .icon-trash
 .icon-search
 .icon-cart
 .icon-minus
 .icon-chevron-right
 .icon-chevron-up
 .icon-arrow-down
 .icon-arrow-left
 .icon-arrow-right
 .icon-arrow-up
 .icon-check
 .icon-cancel
 .icon-pencil
 .icon-mail
 .icon-home
 .icon-factory
 .icon-facebook
 .icon-cart-plus

Nadpisy

Nadpis první úrovně (.h1)

Nadpis druhé úrovně (.h2)

Nadpis třetí úrovně (.h3)

Nadpis čtvrté úrovně (.h4)

Nadpis páté úrovně (.h5)
Nadpis šesté úrovně (.h6)

Odstavec textu (<p>)

Vítr skoro nefouká a tak by se na první pohled mohlo zdát, že se balónky snad vůbec nepohybují. Jenom tak klidně levitují ve vzduchu. Jelikož slunce jasně září a na obloze byste od východu k západu hledali mráček marně, balónky působí jako jakási fata morgána uprostřed pouště. Zkrátka široko daleko nikde nic, jen zelenkavá tráva, jasně modrá obloha a tři křiklavě barevné pouťové balónky, které se téměř nepozorovatelně pohupují ani ne moc vysoko, ani moc nízko nad zemí. Kdyby pod balónky nebyla sytě zelenkavá tráva, ale třeba suchá silnice či beton, možná by bylo vidět jejich barevné stíny - to jak přes poloprůsvitné barevné balónky prochází ostré sluneční paprsky.

Barvy textu

Jenom tak klidně levitují ve vzduchu. (.text-primary)

Jenom tak klidně levitují ve vzduchu. (.text-secondary)

Jenom tak klidně levitují ve vzduchu. (.text-success)

Jenom tak klidně levitují ve vzduchu. (.text-info)

Jenom tak klidně levitují ve vzduchu. (.text-warning)

Jenom tak klidně levitují ve vzduchu. (.text-danger)

Jenom tak klidně levitují ve vzduchu. (.text-light)

Jenom tak klidně levitují ve vzduchu. (.text-dark)

Jenom tak klidně levitují ve vzduchu. (.text-white)

Jenom tak klidně levitují ve vzduchu. (.text-body)

Jenom tak klidně levitují ve vzduchu. (.text-muted)

Jenom tak klidně levitují ve vzduchu. (.text-black-50)

Jenom tak klidně levitují ve vzduchu. (.text-white-50)

Barva pozadí

Jenom tak klidně levitují ve vzduchu. (.bg-primary)

Jenom tak klidně levitují ve vzduchu. (.bg-secondary)

Jenom tak klidně levitují ve vzduchu. (.bg-success)

Jenom tak klidně levitují ve vzduchu. (.bg-info)

Jenom tak klidně levitují ve vzduchu. (.bg-warning)

Jenom tak klidně levitují ve vzduchu. (.bg-danger)

Jenom tak klidně levitují ve vzduchu. (.bg-light)

Jenom tak klidně levitují ve vzduchu. (.bg-dark)

Jenom tak klidně levitují ve vzduchu. (.bg-white)

Jenom tak klidně levitují ve vzduchu. (.bg-transparent)


Tlačítka .btn

Velikost .sm

.btn-link .btn-primary .btn-secondary .btn-warning .btn-info .btn-danger .btn-success .btn-light .btn-dark

Velikost medium

.btn-link .btn-primary .btn-secondary .btn-warning .btn-info .btn-danger .btn-success .btn-light .btn-dark

Velikost .lg

.btn-link .btn-primary .btn-secondary .btn-warning .btn-info .btn-danger .btn-success .btn-light .btn-dark

Outline

.btn-outline-primary .btn-outline-secondary .btn-outline-warning .btn-outline-info .btn-outline-danger .btn-outline-success .btn-outline-light .btn-outline-dark


Tabulky

Základní (.table)

#JménoPříjmení
1VáclavFoobar
2JanFoobar
3MilanFoobar

Pruhovaná (.table-striped)

#JménoPříjmení
1VáclavFoobar
2JanFoobar
3MilanFoobar

Orámovaná (.table-bordered)

#JménoPříjmení
1VáclavFoobar
2JanFoobar
3MilanFoobar

Bez ohraničení (.table-borderless)

#JménoPříjmení
1VáclavFoobar
2JanFoobar
3MilanFoobar

Menší tabulka (.table-sm)

#JménoPříjmení
1VáclavFoobar
2JanFoobar
3MilanFoobar

Seznamy

Nečíslovaný seznam (<ul>)

  • Položka seznamu
  • Položka seznamu
  • Položka seznamu
  • Položka seznamu

Číslovaný seznam (<ol>)

  1. Položka seznamu
  2. Položka seznamu
  3. Položka seznamu
  4. Položka seznamu

Systémové zprávy

Primární zpráva odkazem. (.alert-primary)

Sekundární zpráva odkazem. (.alert-secondary)

Chybová zpráva s odkazem. (.alert-danger)

Info zpráva s odkazem. (.alert-info)

Úspěšně zpracováno s odkazem. (.alert-success)

Pozor stránka se přesunula na odkaz. (.alert-warning)

Světlá zpráva odkazem. (.alert-light)

Tmavá zpráva odkazem. (.alert-dark)


Obrázky

Responzivní obrázky (.img-fluid)

Náhledový obrázek (.img-thumbnail)


Embedy

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Poměr stran

21:9 (.embed-responsive-21by9)

16:9 (.embed-responsive-16by9)

4:3 (.embed-responsive-4by3)

1:1 (.embed-responsive-1by1)


Formuláře

Základní formulář

Popisek pod polem formuláře.

Velikosti polí

Custom pole formuláře

Selecty

Radio a checkbox

Soubor

Range


Stránkování