Two basic options, along with two more specific variations.
Single button group
Wrap a series of buttons with .btn
in .btn-group
.
- <divclass=«btn-group»>
- <buttonclass=«btn»>1</button>
- <buttonclass=«btn»>2</button>
- <buttonclass=«btn»>3</button>
- </div>
Multiple button groups
Combine sets of <div class="btn-group">
into a <div class="btn-toolbar">
for more complex components.
- <divclass=«btn-toolbar»>
- <divclass=«btn-group»>
- …
- </div>
- </div>
Vertical button groups
Make a set of buttons appear vertically stacked rather than horizontally.
- <divclass=«btn-group btn-group-vertical»>
- …
- </div>
Checkbox and radio flavors
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.
Dropdowns in button groups
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group
within a .btn-toolbar
for proper rendering.