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

## Buttongroepen
Bootstrap biedt de klassen `btn-group` en `btn-group-vertical` om knoppen te groeperen, wat zorgt voor betere organisatie en controle over de lay-out:
- `btn-group`: Deze klasse groepeert knoppen horizontaal. Geschikt voor situaties waarin knoppen het beste naast elkaar worden weergegeven, zoals in werkbalken of navigatiebalken;
- `btn-group-vertical`: Deze klasse stapelt knoppen verticaal. Handig wanneer knoppen in een kolom moeten worden weergegeven, bijvoorbeeld in dropdownmenu's of gestapelde navigatie.

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

## Knop Toggle Groepen
Bootstrap biedt de `btn-group-toggle` klasse voor het maken van knop toggle groepen. Met deze functie kunnen sets knoppen worden gemaakt waarbij slechts één knop tegelijk actief kan zijn, vergelijkbaar met keuzerondjes in een radiogroep.

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

ZG9jdW1lbnQKICAucXVlcnlTZWxlY3RvckFsbCgnI2J1dHRvbkdyb3VwIGlucHV0W3R5cGU9InJhZGlvIl0nKQogIC5mb3JFYWNoKGZ1bmN0aW9uIChyYWRpbykgewogICAgcmFkaW8uYWRkRXZlbnRMaXN0ZW5lcigiY2hhbmdlIiwgaGFuZGxlUmFkaW8pOwogIH0pOwoKZnVuY3Rpb24gaGFuZGxlUmFkaW8oKSB7CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiI2J1dHRvbkdyb3VwIGxhYmVsIikuZm9yRWFjaChmdW5jdGlvbiAobGFiZWwpIHsKICAgIGxhYmVsLmNsYXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogIH0pOwogIHRoaXMuY2xvc2VzdCgibGFiZWwiKS5jbGFzc0xpc3QuYWRkKCJhY3RpdmUiKTsKfQ==

Ontdek de kernprincipes van het Bootstrap CSS-framework en ontrafel de geheimen achter het snel en efficiënt ontwikkelen van responsieve en visueel aantrekkelijke websites. Door praktische verkenning van de belangrijkste utilities en het toepassen van krachtige componenten, doe je waardevolle ervaring op om je webontwikkelingsproces te optimaliseren met de veelzijdige toolkit van Bootstrap.

Verdiep u in de essentie van Bootstrap en de ontwikkeling ervan van het begin tot nu, weeg de voordelen en nadelen af, en begrijp de vereisten voor een effectieve implementatie.

Verken de installatieopties van Bootstrap. Kies tussen snelle integratie via Content Delivery Network (CDN) of een meer aangepaste aanpak met Node Package Manager (NPM).

Verwerf vaardigheid in essentiële Bootstrap-elementen, waaronder het veelzijdige gridsysteem, genuanceerde typografie, dynamisch gebruik van knoppen, nauwkeurige beheersing van marges en opvullingen, en het ontwerpen van effectieve formulieren voor een soepele gebruikersinteractie.

Verhoog uw Bootstrap-vaardigheden met geavanceerde onderwerpen zoals dynamische navigatiemenu's, responsieve afbeeldingsverwerking, veelzijdige kaartlay-outs, interactieve modals en boeiende carrousels voor meeslepende gebruikerservaringen.

Maak een portfolio website met behulp van het Bootstrap-framework onder onze begeleiding. Benut de krachtige functionaliteiten van Bootstrap. Deze praktische sectie helpt bij het presenteren van uw vaardigheden, projecten en prestaties.

Geavanceerde Knopfuncties

Buttongroepen

Knop Toggle Groepen

Awesome!

Geavanceerde Knopfuncties

Buttongroepen

Knop Toggle Groepen