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 .btn in .btn-group and .btn-toolbar.
Use when:
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
Wrap a series of buttons with .btn in .btn-group. There is a .btn-group-primary version availabel but the difference between default and primary is visible only on the active state.
<divclass="btn-group btn-group-primary"role="group"aria-label="Button group with alternative style"><buttontype="button"class="btn">Left</button><buttontype="button"class="btn">Middle</button><buttontype="button"class="btn">Right</button></div>
Button toolbars
Combine sets of <div class="btn-group" role="group"> into a <div class="btn-toolbar" role="toolbar"> for more complex components.
<divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group"role="group"aria-label="Button group"><buttontype="button"class="btn">Left</button><buttontype="button"class="btn">Middle</button><buttontype="button"class="btn">Right</button></div><buttontype="button"class="btn">Button</button></div>
Sizes - Large version
Instead of applying button sizing classes to every button in a group, just add .btn-group-lg to each .btn-group.
<divclass="btn-group btn-group-primary"role="group"aria-label="Button group with alternative style"><buttontype="button"class="btn">Left</button><buttontype="button"class="btn">Middle</button><buttontype="button"class="btn active"aria-selected="true">Right</button></div>
Disabled state
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.
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.