In Bootstrap 5 (BS5), button groups allow you to group a series of buttons together on a single line or stack them vertically. This helps in creating toolbars, toggles, or segmented controls.

?? Basic Button Group

<div class="btn-group" role="group" aria-label="Basic example">  <button type="button" class="btn btn-primary">Left</button>  <button type="button" class="btn btn-primary">Middle</button>  <button type="button" class="btn btn-primary">Right</button></div>

• btn-group: Wraps the button group

• role="group": Improves accessibility

?? Vertical Button Group

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">  <button type="button" class="btn btn-secondary">Top</button>  <button type="button" class="btn btn-secondary">Middle</button>  <button type="button" class="btn btn-secondary">Bottom</button></div>

? Mixed Styles

You can combine different button types and elements in one group.

<div class="btn-group" role="group">  <button type="button" class="btn btn-success">Yes</button>  <button type="button" class="btn btn-danger">No</button>  <button type="button" class="btn btn-warning">Maybe</button></div>

? Button Toolbar

Use .btn-toolbar to group multiple button groups.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">  <div class="btn-group me-2" role="group">    <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>  </div>  <div class="btn-group me-2" role="group">    <button type="button" class="btn btn-outline-secondary">A</button>    <button type="button" class="btn btn-outline-secondary">B</button>  </div></div>

? Toggle Button Group

Use data attributes for checkbox or radio toggle groups:

Checkbox Toggle Group

<div class="btn-group" role="group" aria-label="Checkbox toggle button group">  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">  <label class="btn btn-outline-primary" for="btncheck1">Option 1</label>  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">  <label class="btn btn-outline-primary" for="btncheck2">Option 2</label>  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">  <label class="btn btn-outline-primary" for="btncheck3">Option 3</label></div>

Radio Toggle Group

<div class="btn-group" role="group" aria-label="Radio toggle button group">  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>  <label class="btn btn-outline-secondary" for="option1">One</label>  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">  <label class="btn btn-outline-secondary" for="option2">Two</label>  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">  <label class="btn btn-outline-secondary" for="option3">Three</label></div>

Would you like examples with dropdowns in button groups or a live toolbar UI?