Summary  
This chapter covers how to group buttons horizontally or vertically and implement toggle behavior among buttons using CSS class–based code to manage layout and active states.

General domain of usage  
Frontend web development

## Gruppi di Pulsanti
Bootstrap offre le classi `btn-group` e `btn-group-vertical` per raggruppare i pulsanti, facilitando una migliore organizzazione e controllo del layout:
- `btn-group`: Questa classe raggruppa orizzontalmente i pulsanti. È adatta per situazioni in cui i pulsanti devono essere visualizzati affiancati, come nelle barre degli strumenti o nelle barre di navigazione;
- `btn-group-vertical`: Questa classe impila verticalmente i pulsanti. È utile quando i pulsanti devono essere visualizzati in una disposizione a colonna, come nei menu a discesa o nella navigazione impilata.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QnV0dG9ucyBQYXJ0IDIgRXhhbXBsZSAxPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InJvdyI+CiAgICAgIDxkaXYgY2xhc3M9ImNvbC02Ij4KICAgICAgICA8ZGl2IGNsYXNzPSJidG4tZ3JvdXAiIHJvbGU9Imdyb3VwIj4KICAgICAgICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi13YXJuaW5nIj5MZWZ0PC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4td2FybmluZyI+TWlkZGxlPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4td2FybmluZyI+UmlnaHQ8L2J1dHRvbj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJjb2wtNiI+CiAgICAgICAgPGRpdiBjbGFzcz0iYnRuLWdyb3VwLXZlcnRpY2FsIiByb2xlPSJncm91cCI+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+VG9wPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+TWlkZGxlPC9idXR0b24+CiAgICAgICAgICA8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyI+Qm90dG9tPC9idXR0b24+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

## Gruppi di Pulsanti Toggle
Bootstrap fornisce la classe `btn-group-toggle` per creare gruppi di pulsanti toggle. Questa funzionalità consente di creare insiemi di pulsanti in cui solo uno può essere attivo alla volta, in modo simile ai pulsanti radio in un gruppo radio.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QnV0dG9ucyBQYXJ0IDIgRXhhbXBsZSAyPC90aXRsZT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYKICAgICAgY2xhc3M9ImJ0bi1ncm91cCBidG4tZ3JvdXAtdG9nZ2xlIgogICAgICBkYXRhLXRvZ2dsZT0iYnV0dG9ucyIKICAgICAgaWQ9ImJ1dHRvbkdyb3VwIgogICAgPgogICAgICA8bGFiZWwgY2xhc3M9ImJ0biBidG4tZGFyayBhY3RpdmUiPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ib3B0aW9ucyIgaWQ9Im9wdGlvbjEiIGNoZWNrZWQgLz4gT3B0aW9uIDEKICAgICAgPC9sYWJlbD4KICAgICAgPGxhYmVsIGNsYXNzPSJidG4gYnRuLWRhcmsiPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgbmFtZT0ib3B0aW9ucyIgaWQ9Im9wdGlvbjIiIC8+IE9wdGlvbiAyCiAgICAgIDwvbGFiZWw+CiAgICAgIDxsYWJlbCBjbGFzcz0iYnRuIGJ0bi1kYXJrIj4KICAgICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIG5hbWU9Im9wdGlvbnMiIGlkPSJvcHRpb24zIiAvPiBPcHRpb24gMwogICAgICA8L2xhYmVsPgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAuYnVuZGxlLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

ZG9jdW1lbnQKICAucXVlcnlTZWxlY3RvckFsbCgnI2J1dHRvbkdyb3VwIGlucHV0W3R5cGU9InJhZGlvIl0nKQogIC5mb3JFYWNoKGZ1bmN0aW9uIChyYWRpbykgewogICAgcmFkaW8uYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgaGFuZGxlUmFkaW8pOwogIH0pOwoKZnVuY3Rpb24gaGFuZGxlUmFkaW8oKSB7CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiI2J1dHRvbkdyb3VwIGxhYmVsIikuZm9yRWFjaChmdW5jdGlvbiAobGFiZWwpIHsKICAgIGxhYmVsLmNsYXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogIH0pOwogIHRoaXMuY2xvc2VzdCgibGFiZWwiKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKfQ==

Esplora i principi fondamentali del framework CSS Bootstrap e scopri i segreti per realizzare siti web reattivi e visivamente accattivanti in modo rapido ed efficiente. Attraverso un'esplorazione pratica delle principali utility e l'implementazione di potenti componenti, acquisirai un'esperienza pratica preziosa per ottimizzare il flusso di lavoro nello sviluppo web utilizzando il versatile toolkit di Bootstrap.

Esplora l'essenza di Bootstrap e il suo percorso dall'inizio fino ad oggi, valuta i suoi vantaggi e svantaggi e comprendi i prerequisiti per un'implementazione efficace.

Esplorazione delle opzioni di installazione di Bootstrap. Scelta tra integrazione rapida tramite Content Delivery Network (CDN) o un approccio più personalizzato con Node Package Manager (NPM).

Acquisizione di competenze negli elementi chiave di Bootstrap, tra cui il versatile sistema a griglia, la tipografia dettagliata, l'utilizzo dinamico dei pulsanti, la gestione precisa di margini e spaziature, e la creazione di moduli efficaci per un'interazione utente senza soluzione di continuità.

Migliora le tue competenze in Bootstrap con argomenti avanzati che includono menu di navigazione dinamici, gestione reattiva delle immagini, layout di card versatili, modali interattivi e caroselli coinvolgenti per esperienze utente accattivanti.

Crea un sito portfolio utilizzando il framework Bootstrap con la nostra guida. Sfrutta le potenti funzionalità di Bootstrap. Questa sezione pratica aiuterà a mostrare competenze, progetti e risultati.

Funzionalità Avanzate Dei Pulsanti

Gruppi di Pulsanti

Gruppi di Pulsanti Toggle

Awesome!

Funzionalità Avanzate Dei Pulsanti

Gruppi di Pulsanti

Gruppi di Pulsanti Toggle