--- title: Button group description: Group a series of buttons together on a single line or stack them in a vertical column. toc: true --- ## Basic example Wrap a series of buttons with `.btn` in `.btn-group`. `} /> Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them. These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/navs-tabs]]). Active link Link Link `} /> ## Mixed styles `} /> ## Outlined styles `} /> ## Checkbox and radio button groups Combine button-like checkbox and radio [toggle buttons]([[docsref:/forms/checks-radios]]) into a seamless looking button group. `} /> `} /> ## Button toolbar Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
`} /> Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
@
`} /> ## Sizing Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.

`} /> ## Nesting Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
`} /> ## Vertical variation Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.** `} />
`} /> `} />