Gruppi e Barre di Bottoni

Indice dei contenuti

Il componente Button Groups consente di riunire in un gruppo una serie di bottoni in modo da formare una barra.

Markup HTML di base

<div class="btn-group">
  <button type="button" class="btn btn-default">Bottone 1</button>
  <button type="button" class="btn btn-default">Bottone 2</button>
  <button type="button" class="btn btn-default">Bottone 3</button>
</div>

Per creare un gruppo di bottoni, si inseriscono due o più bottoni all'interno di un div con classe .btn-group che finge da contenitore.

Barre con più gruppi

Per creare barre più complesse che racchiudono più gruppi di bottoni, si racchiudono più elementi con classe .btn-group all'interno di un div con classe .btn-toolbar.

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">Bottone 1</button>
  <button type="button" class="btn btn-default">Bottone 2</button>
  <button type="button" class="btn btn-default">Bottone 3</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">Bottone 4</button>
  <button type="button" class="btn btn-default">Bottone 5</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">Bottone 6</button>
  <button type="button" class="btn btn-default">Bottone 7</button>
 </div>
</div>

Varianti: barra di bottoni verticale

Una barra di bottoni può essere definita verticalmente inserendola in un div con classe .btn-group-vertical.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-default">Bottone 1</button>
  <button type="button" class="btn btn-default">Bottone 2</button>
  <button type="button" class="btn btn-default">Bottone 3</button>
  <button type="button" class="btn btn-default">Bottone 4</button>
  <button type="button" class="btn btn-default">Bottone 5</button>
</div>

Varianti: barra giustificata

Racchiudendo i bottoni in un div con le classi btn-group btn-group-justified si crea una barra che occupa la larghezza intera del suo contenitore e in cui i singoli bottoni si adattano nel riempire lo spazio disponibile prendendo una larghezza uguale. Nel gruppo di bottoni standard, la larghezza del singolo bottone è data dal suo contenuto, ovvero dal testo che lo accompagna. Questa soluzione funziona solo se il bottone è realizzato con l'elemento a.

<div class="btn-group btn-group-justified">
  <a class="btn btn-default" href="#">Bottone 1</a>
  <a class="btn btn-default" href="#">Bottone 2</a>
  <a class="btn btn-default" href="#">Bottone 3</a>
  <a class="btn btn-default" href="#">Bottone 4</a>
  <a class="btn btn-default" href="#">Bottone 5</a>
</div>

Bottone 1 Bottone 2 Bottone 3 Bottone 4 Bottone 5

Dimensioni della barra

È possibile impostare le dimensioni della barra usando le classi btn-group-lg (large), btn-group-sm (small), btn-group-xs (extra-small) in aggiunta alla classe btn-group.