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 available but the difference between default and primary is visible only on the active state.
<pclass="mb-8"><b>Default</b></p><divclass="btn-group demo-with-states"role="group"aria-label="Button group"><buttontype="button"class="btn">Left</button><buttontype="button"class="btn">Middle</button><buttontype="button"class="btn active">Right</button></div><pclass="mb-8 mt-24"><b>Primary</b></p><divclass="btn-group btn-group-primary demo-with-states"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>
Button toolbars
Combine sets of <div class="btn-group" role="group"> into a <div class="btn-toolbar" role="toolbar"> for more complex components.
<pclass="mb-8"><b>Defaut</b></p><divclass="btn-toolbar"role="toolbar"aria-label="Default toolbar style 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 active"aria-selected="true">Right</button></div></div><pclass="mb-8 mt-24"><b>Primary</b></p><divclass="btn-toolbar btn-toolbar-primary"role="toolbar"aria-label="Alternative toolbar style 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 active"aria-selected="true">Right</button></div></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.
<pclass="mb-8"><b>Regular</b></p><divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group"role="group"aria-label="Button group with nested dropdown"><divclass="dropdown"><buttontype="button"id="btnGroupDrop1"class="btn dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</button><divclass="dropdown-menu"role="menu"aria-expanded="false"aria-hidden="true"aria-labelledby="btnGroupDrop1"><buttontype="button"class="dropdown-item">Item 1</button><buttontype="button"class="dropdown-item disabled"tabindex="-1"aria-disabled="true">Item 2</button><buttontype="button"class="dropdown-item">Item 3, with a looooong label</button><buttontype="button"class="dropdown-item active">Item 4</button><buttontype="button"class="dropdown-item">Item 5</button></div></div><buttontype="button"class="btn">Middle</button><buttontype="button"class="btn">Right</button></div></div><pclass="mb-8 mt-24"><b>Large</b></p><divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group btn-group-lg"role="group"aria-label="Button group with nested dropdown"><buttontype="button"class="btn">Left</button><divclass="dropdown"><buttontype="button"id="btnGroupDrop2"class="btn dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">Dropdown</button><divclass="dropdown-menu"role="menu"aria-expanded="false"aria-hidden="true"aria-labelledby="btnGroupDrop2"><buttontype="button"class="dropdown-item">Item 1</button><buttontype="button"class="dropdown-item disabled"tabindex="-1"aria-disabled="true">Item 2</button><buttontype="button"class="dropdown-item">Item 3, with a looooong label</button><buttontype="button"class="dropdown-item active">Item 4</button><buttontype="button"class="dropdown-item">Item 5</button></div></div><buttontype="button"class="btn">Right</button></div></div>
Vertical button groups
Make a set of buttons appear vertically stacked rather than horizontally. Dropdowns and split buttons are not supported here.
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.
Design System