Z tlačítek taky lze vytvářet skupiny.

Jedna skupina

Zde je příklad jednoduché skupiny tlačítek:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Tlačítko 1</button>
  <button type="button" class="btn btn-primary">Tlačítko 2</button>
  <button type="button" class="btn btn-primary">Tlačítko 3</button>
</div>

Tyto tlačítka můžeme dále upravovat. Je možné nastavit si jejich velikosti a druhy. Do skupiny můžeme také vkládat dropdown tlačítka.

Více skupin

Je také možné vkládát více skupin tlačítek vedle sebe:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-danger">8</button>
  </div>
</div>

Řazení tlačítek

Tlačítka je ve skupině také možné řadit vertikálně (budou nad sebou). To uděláme změněním třídy v prvním řádku kódu, ten bude vypadat následovně:

<div class="btn-group-vertical" role="group" aria-label="Basic example">
...

Příklad celého kódu:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Tlačítko 1</button>
  <button type="button" class="btn btn-primary">Tlačítko 2</button>
  <button type="button" class="btn btn-primary">Tlačítko 3</button>
</div>