Tlačítka pak můžeme mít různých druhů:

Pozn.: změny provádíme ve třídách (class)

Outline tlačítka

<button type="button" class="btn btn-outline-primary">Primary</button>

Primary Secondary Success Danger Warning Info Light Dark Link

Vypnutá tlačítka

Toto tlačítko využijeme, pokud budeme chtít tlačítko vypnout a zamezit uživateli jeho použití.

<button type="button" class="btn btn-primary" disabled>Primary button</button>

Primary button

Tlačítka s odkazem

Pokud potřebujeme po zmáčknutí tlačítka otevřít odkaz, vložíme odkaz následovně (místo # do uvozovek za a href):

<a href="#" class="btn btn-primary" role="button" aria-pressed="true">Primary link</a>

Příklad bude poté například tento:

<a href="https://shipard.org/prirucka/372" class="btn btn-outline-primary" role="button" aria-pressed="true">Primary link</a>

Barvy tlačítek

Dropdown tlačítka

Pro vytvoření dropdown tlačítka využijeme následující příkaz:

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown tlačítko
</button>

Dropdown tlačítko

Tlačítko poté naplníme následovně:

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Jak psát text
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="https://shipard.org/prirucka/223">Běžný text</a>
      <a class="dropdown-item" href="https://shipard.org/prirucka/224">Obrázky</a>
    </div>
</div>