Links

Midden

Rechts

`:Hiermee wordt de knopgroepcontainer gemaakt. Het kenmerk `role="group"` geeft aan dat de knoppen in deze container deel uitmaken van een groep, en het kenmerk `aria-label` geeft een beschrijving van het doel van de knopgroep.

2. `Links `:Hiermee wordt de eerste knop binnen de groep gemaakt. Het kenmerk `type="button"` geeft aan dat de knop geen formulier verzendt, en de kenmerken `class="btn btn-primary"` geven de knop vorm als een primaire knop in het standaardthema van Bootstrap.

3. Op dezelfde manier creëren de andere twee ``-elementen de middelste en rechterknop met dezelfde stijl en functionaliteit.

De resulterende knoppengroep ziet er als volgt uit:

[Afbeelding van een knoppengroep met drie primaire knoppen met de labels 'Links', 'Midden' en 'Rechts']

U kunt de knoppengroep aanpassen door extra knoppen toe te voegen, de knopstijlen te wijzigen en het `aria-label` attribuut aan te passen om een ​​andere beschrijving te geven.

Hier volgen enkele aanvullende opties voor het aanpassen van knopgroepen:

* Om de knoppen verticaal uit te lijnen, voegt u de klasse `btn-group-vertical` toe aan de container `

`.

* Om een ​​set keuzerondjes te maken, voegt u het data-attribuut `btn-group-toggle` toe aan de `

` container en stelt u het `role="radiogroup"` attribuut in op het `` element binnen elke ` `.

* Om een ​​set selectievakjes te maken, voegt u het data-attribuut `btn-group-toggle` toe aan de `

` container en stelt u het `role="checkboxgroup"` attribuut in op het `` element binnen elk ` `.

* Om een ​​knop uit te schakelen, voegt u het `disabled` attribuut toe aan het `

` element.

Knopgroepen zijn een veelzijdige component in Bootstrap 5 waarmee u eenvoudig verschillende knopconfiguraties en -stijlen kunt maken.