Two basic options, along with two more specific variations.
Wrap a series of buttons with .btn
in .btn-group
.
<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Center</button> <button class="btn">Right</button> </div>
Combine sets of <div class="btn-group">
into a <div class="btn-toolbar">
for more complex components.
<div class="btn-toolbar"> <div class="btn-group"> ... </div> </div>
Make a set of buttons appear vertically stacked rather than horizontally.
<div class="btn-group btn-group-vertical"> ... </div>
Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group
within a .btn-toolbar
for proper rendering.