Button Group

Group a series of buttons together on a single line with the button group, and super-power them with javascript. Read the Official Bootstrap Documentation for a full list of instructions and other options.


Basic Example

Group a series of buttons together on a single line with the button group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">General</button>
  <button type="button" class="btn btn-secondary">Privacy</button>
  <button type="button" class="btn btn-secondary">Account</button>
</div>

Button Toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    ...
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">...</div>
  <div class="btn-group" role="group" aria-label="Third group"></div>
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>

Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

<div class="btn-group-vertical">...</div>