---
layout: docs
title: Button group
group: components
---
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
{% callout info %}
**Bootstrap Reference Documentation**
This is reference documentation from Bootstrap.
It is being rendered with Material Design for Bootstrap to demonstrate default styling.
See the Material Design section for more elements and customization options.
{% endcallout %}
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]({{ site.baseurl }}/components/buttons/#button-plugin).
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## 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.**
{% endhighlight %}
## Tooltips and popovers
Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **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).