A toggle button is visual control for showing one of several possible states with explicit labelings. Read more about toggle buttons in the UX Guidelines.
Group a series of buttons together on a single line with the button group. Wrap a series of buttons with
- The user needs to choose one value out of a predefined set of options, e.g. for filtering a grid
- It is useful to see all the options available at one glance
- The selected choice needs to be visually prominent
- You want the control to use minimal vertical space
- You want it to run on touch screens (too), since checkboxes are typically too small for finger touch area
Wrap a series of buttons with
.btn-group. There is a
.btn-group-primary version availabel but the difference between default and primary is visible only on the active state.
Combine sets of
<div class="btn-group" role="group"> into a
<div class="btn-toolbar" role="toolbar"> for more complex components.
Sizes - Large version
Instead of applying button sizing classes to every button in a group, just add
.btn-group-lg to each
Add selected/active state on one of the buttons from the group by adding
Add disabled state on each button that you need from the group by adding
.disabled class or add the
disabled attribute or add the
.disabled class on the
.btn-group directly to make all the elements inactive.
.dropdown inside a
.btn-groups. Check the code example from the code section.
Vertical button groups
Make a set of buttons appear vertically stacked rather than horizontally. Dropdowns and split buttons are not supported here.
Justified button groups
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group. Add
.btn-group-justified to make this.