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 id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown tlačítko
</button>

Dropdown tlačítko

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

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