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).
<pclass="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <ahref="../javascript/#buttons">our buttons plugin</a>.</p>
<divclass="bs-callout bs-callout-warning">
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<divclass="bs-callout bs-callout-warning">
### Basic example
<h4>Tooltips & popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<h3id="btn-groups-single">Basic example</h3>
Wrap a series of buttons with `.btn` in `.btn-group`.
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<p>Make a set of buttons appear vertically stacked rather than horizontally. <strongclass="text-danger">Split button dropdowns are not supported here.</strong></p>
<divclass="bs-example">
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
<p>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.</p>
<divclass="bs-callout bs-callout-warning">
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.
<h4>Handling borders</h4>
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>IE8 and borders</h4>
<p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code><a></code> or <code><button></code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
<p>See <ahref="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
</div>
<h4>With <code><a></code> elements</h4>
<divclass="bs-callout bs-callout-warning">
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<h4>Handling borders</h4>
<divclass="bs-example">
<p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
<p>To use justified button groups with <code><button></code> elements, <strongclass="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p>
<divclass="bs-example">
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 workaround that.
