Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Bootstrap 5.2 / Componenten

Button group

Groepeer een reeks knoppen op één regel of stapel ze in een verticale kolom.

Basisvoorbeeld

Wikkel een reeks knoppen met .btn in .btn-group.

HTML
<div class="btn-group" role="group" aria-label="Basisvoorbeeld">
  <button type="button" class="btn btn-primary">Links</button>
  <button type="button" class="btn btn-primary">Midden</button>
  <button type="button" class="btn btn-primary">Rechts</button>
</div>
Let op
Zorg voor de juiste role en geef een label mee

Om hulptechnologieën (zoals schermlezers) te laten weten dat een reeks knoppen gegroepeerd is, moet er een passend role-attribuut worden meegegeven. Voor button groups is dat role="group", terwijl toolbars role="toolbar" horen te hebben.

Daarnaast moeten groepen en toolbars een expliciet label krijgen, omdat de meeste hulptechnologieën ze anders niet aankondigen, ook al is het juiste role-attribuut aanwezig. In de voorbeelden hier gebruiken we aria-label, maar alternatieven zoals aria-labelledby kunnen ook.

Deze klassen kunnen ook aan groepen links worden toegevoegd, als alternatief voor de .nav-navigatiecomponenten.

HTML
<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Actieve link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Gemengde stijlen

HTML
<div class="btn-group" role="group" aria-label="Basisvoorbeeld met gemengde stijlen">
  <button type="button" class="btn btn-danger">Links</button>
  <button type="button" class="btn btn-warning">Midden</button>
  <button type="button" class="btn btn-success">Rechts</button>
</div>

Outline-stijlen

HTML
<div class="btn-group" role="group" aria-label="Basisvoorbeeld met outline">
  <button type="button" class="btn btn-outline-primary">Links</button>
  <button type="button" class="btn btn-outline-primary">Midden</button>
  <button type="button" class="btn btn-outline-primary">Rechts</button>
</div>

Knopgroepen met selectievakjes en radioknoppen

Combineer knopachtige toggle-knoppen met selectievakje en radioknop tot een naadloos ogende knopgroep.

HTML
<div class="btn-group" role="group" aria-label="Basisknopgroep met selectievakje-toggles">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Selectievakje 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Selectievakje 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Selectievakje 3</label>
</div>
HTML
<div class="btn-group" role="group" aria-label="Basisknopgroep met radio-toggles">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Knoptoolbar

Combineer sets knopgroepen tot knoptoolbars voor complexere componenten. Gebruik naar behoefte utility-klassen om ruimte tussen groepen, knoppen en meer te creëren.

HTML
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar met knopgroepen">
  <div class="btn-group me-2" role="group" aria-label="Eerste groep">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Tweede groep">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Derde groep">
    <button type="button" class="btn btn-info">8</button>
  </div>
</div>

Je kunt input groups gerust met knopgroepen in je toolbars combineren. Net als in het voorbeeld hierboven heb je waarschijnlijk wel wat utilities nodig om de tussenruimte goed te krijgen.

HTML
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar met knopgroepen">
  <div class="btn-group me-2" role="group" aria-label="Eerste groep">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</div>
    <input type="text" class="form-control" placeholder="Voorbeeld van input group" aria-label="Voorbeeld van input group" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar met knopgroepen">
  <div class="btn-group" role="group" aria-label="Eerste groep">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Voorbeeld van input group" aria-label="Voorbeeld van input group" aria-describedby="btnGroupAddon2">
  </div>
</div>

Afmetingen

In plaats van knopformaatklassen op elke knop in een groep toe te passen, voeg je gewoon .btn-group-* aan elke .btn-group toe, inclusief elke groep wanneer je meerdere groepen nest.

HTML
<div class="btn-group btn-group-lg" role="group" aria-label="Grote knopgroep">
  <button type="button" class="btn btn-outline-dark">Links</button>
  <button type="button" class="btn btn-outline-dark">Midden</button>
  <button type="button" class="btn btn-outline-dark">Rechts</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Standaard knopgroep">
  <button type="button" class="btn btn-outline-dark">Links</button>
  <button type="button" class="btn btn-outline-dark">Midden</button>
  <button type="button" class="btn btn-outline-dark">Rechts</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Kleine knopgroep">
  <button type="button" class="btn btn-outline-dark">Links</button>
  <button type="button" class="btn btn-outline-dark">Midden</button>
  <button type="button" class="btn btn-outline-dark">Rechts</button>
</div>

Nesten

Plaats een .btn-group binnen een andere .btn-group wanneer je dropdownmenu's met een reeks knoppen wilt combineren.

HTML
<div class="btn-group" role="group" aria-label="Knopgroep met geneste dropdown">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
    </ul>
  </div>
</div>

Verticale variant

Laat een set knoppen verticaal gestapeld in plaats van horizontaal verschijnen. Split button-dropdowns worden hier niet ondersteund.

HTML
<div class="btn-group-vertical" role="group" aria-label="Verticale knopgroep">
  <button type="button" class="btn btn-dark">Knop</button>
  <button type="button" class="btn btn-dark">Knop</button>
  <button type="button" class="btn btn-dark">Knop</button>
  <button type="button" class="btn btn-dark">Knop</button>
  <button type="button" class="btn btn-dark">Knop</button>
  <button type="button" class="btn btn-dark">Knop</button>
</div>
HTML
<div class="btn-group-vertical" role="group" aria-label="Verticale knopgroep">
  <button type="button" class="btn btn-primary">Knop</button>
  <button type="button" class="btn btn-primary">Knop</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Knop</button>
  <button type="button" class="btn btn-primary">Knop</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown-link</a></li>
    </ul>
  </div>
</div>
HTML
<div class="btn-group-vertical" role="group" aria-label="Verticale knopgroep met radio-toggles">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>