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

Sizing

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

Vertical variation

Checkbox and radio button groups

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

Checkbox 1 Checkbox 2

Radio 1 Radio 2

Toggle (JS)

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