Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example

Wrap a series of buttons with .btn in .btn-group.

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

Mixed styles

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-primary">1</button>
    <button type="button" class="btn btn-outline-primary">2</button>
    <button type="button" class="btn btn-outline-primary">3</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-outline-primary">4</button>
    <button type="button" class="btn btn-outline-primary">5</button>
  </div>
</div>

Sizing

Apply .btn-group-lg or .btn-group-sm to the group.

<div class="btn-group btn-group-lg mb-2" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Vertical variation

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-outline-primary">Button</button>
  <button type="button" class="btn btn-outline-primary">Button</button>
  <button type="button" class="btn btn-outline-primary">Button</button>
</div>

Checkbox and radio button groups

Combine button styles with .btn-check inputs for checkable toggles.

Checkbox 1 Checkbox 2

Radio 1 Radio 2

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
</div>
<div class="btn-group mt-2" role="group" aria-label="Basic radio toggle button group">
  <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>
</div>

Toggle (JS)

Use data-boodoo-toggle="button" to toggle the .active class on a button and sync its checkbox input.

<button type="button" class="btn btn-outline-primary" data-boodoo-toggle="button">Toggle me</button>