---
layout: page
title: Button group
---
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).
{% callout warning %}
#### Tooltips & popovers in button groups require special setting
When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
{% endcallout %}
{% callout warning %}
#### Ensure correct `role` and provide a label
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
{% endcallout %}
### Basic example
Wrap a series of buttons with `.btn` in `.btn-group`.
{% example html %}
{% endexample %}
### Button toolbar
Combine sets of button groups into button toolbars for more complex components.
{% example html %}
{% endexample %}
### 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.
{% highlight html %}
...
...
...
...
{% endhighlight %}
### Nesting
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
{% example html %}
{% endexample %}
### Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**