# Button groups

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.

#### 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).

#### 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"`.

One exception are groups which only contain a single control (for instance the justified button groups with `<button>` elements) or a dropdown.

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.

### Basic example

Wrap a series of buttons with `.btn` in `.btn-group`.

{% highlight html %}
{% endhighlight %}

### Button toolbar

Combine sets of `<div class="btn-group">` into a `<div class="btn-toolbar">` for more complex components.

{% highlight html %}
...
...
...
{% endhighlight %}

### Sizing

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including 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.

{% highlight html %}
{% endhighlight %}

### Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

{% highlight html %}
...
{% endhighlight %}

### 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.

#### Handling borders

Due to the specific HTML and CSS used to justify buttons (namely `display: table-cell`), the borders between them are doubled. In regular button groups, `margin-left: -1px` is used to stack the borders instead of removing them. However, `margin` doesn't work with `display: table-cell`. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.

#### IE8 and borders

Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on `<a>` or `<button>` elements. To get around that, wrap each button in another `.btn-group`.

See #12476 for more information.

#### With `<a>` elements

Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.

Left Middle Right
Left Middle
Dropdown
{% highlight html %}
...
{% endhighlight %}

#### Links acting as buttons

If the `<a>` elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate `role="button"`.

#### With `<button>` elements

To use justified button groups with `<button>` elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can work around that.

{% highlight html %}
{% endhighlight %}