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

## Buttongrupper
Bootstrap erbjuder klasserna `btn-group` och `btn-group-vertical` för att gruppera knappar, vilket underlättar bättre organisering och layoutkontroll:
- `btn-group`: Denna klass grupperar knappar horisontellt. Den är lämplig när knappar bör visas sida vid sida, till exempel i verktygsfält eller navigationsfält;
- `btn-group-vertical`: Denna klass staplar knappar vertikalt. Den är användbar när knappar behöver visas i en kolumnlayout, till exempel i rullgardinsmenyer eller staplad navigering.

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

## Växlingsgrupper för knappar
Bootstrap tillhandahåller klassen `btn-group-toggle` för att skapa växlingsgrupper för knappar. Denna funktion gör det möjligt att skapa uppsättningar av knappar där endast en knapp kan vara aktiv åt gången, liknande radioknappar i en radiogrupp.

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

ZG9jdW1lbnQKICAucXVlcnlTZWxlY3RvckFsbCgnI2J1dHRvbkdyb3VwIGlucHV0W3R5cGU9InJhZGlvIl0nKQogIC5mb3JFYWNoKGZ1bmN0aW9uIChyYWRpbykgewogICAgcmFkaW8uYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgaGFuZGxlUmFkaW8pOwogIH0pOwoKZnVuY3Rpb24gaGFuZGxlUmFkaW8oKSB7CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiI2J1dHRvbkdyb3VwIGxhYmVsIikuZm9yRWFjaChmdW5jdGlvbiAobGFiZWwpIHsKICAgIGxhYmVsLmNsYXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogIH0pOwogIHRoaXMuY2xvc2VzdCgibGFiZWwiKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKfQ==

Utforska grundläggande principer för Bootstrap CSS-ramverket och upptäck hemligheterna bakom att snabbt och effektivt skapa responsiva och visuellt tilltalande webbplatser. Genom praktisk utforskning av viktiga verktyg och implementering av kraftfulla komponenter får du ovärderlig praktisk erfarenhet som effektiviserar ditt arbetsflöde inom webbutveckling med Bootstraps mångsidiga verktygslåda.

Fördjupa dig i kärnan av Bootstrap och dess resa från tillkomst till nutid, väg dess fördelar och nackdelar samt förstå förutsättningar för effektiv implementering.

Navigera bland installationsalternativ för Bootstrap. Välj mellan snabb integration via Content Delivery Network (CDN) eller en mer anpassad metod med Node Package Manager (NPM).

Fördjupa dig i centrala Bootstrap-element, inklusive det mångsidiga rutnätsystemet, nyanserad typografi, dynamisk knappanvändning, exakt hantering av marginaler och utfyllnader samt utformning av effektiva formulär för smidig användarinteraktion.

Förbättra dina Bootstrap-kunskaper med avancerade ämnen som omfattar dynamiska navigationsmenyer, responsiv bildhantering, mångsidiga kortlayouter, interaktiva modaler och engagerande karuseller för fängslande användarupplevelser.

Skapa en portfoliosida med hjälp av Bootstrap-ramverket med vår vägledning. Utnyttja de kraftfulla funktionerna i Bootstrap. Denna praktiska sektion hjälper dig att visa upp dina färdigheter, projekt och prestationer.

Avancerade Knappfunktioner

Buttongrupper

Växlingsgrupper för knappar