Bootstrap 3 Button Groups

Group buttons together on a single line with Bootstrap's button groups.

Bootstrap button groups allow you to group buttons together, either horizontally or vertically.

Horizontal Button Group

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Thailand</button>
<button type="button" class="btn btn-default">Cambodia</button>
<button type="button" class="btn btn-default">Vietnam</button>
</div>

Vertical Button Group

Replace btn-group with btn-group-vertical to make the button group stack vertically.

<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-default">Thailand</button>
<button type="button" class="btn btn-default">Cambodia</button>
<button type="button" class="btn btn-default">Vietnam</button>
</div>

Button Group Size

Bootstrap enables you to control the size of all buttons within the group (so that you don't need to change each button individually).

To do this, add either of the .btn-group-lg, .btn-group-lg, or .btn-group-lg classes to the .button-group class make all buttons within the group large, small, or extra small respectively.

<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default">Extra Small</button>
<button type="button" class="btn btn-default">Extra Small</button>
<button type="button" class="btn btn-default">Extra Small</button>
</div>

<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default">Small</button>
<button type="button" class="btn btn-default">Small</button>
<button type="button" class="btn btn-default">Small</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Default size</button>
<button type="button" class="btn btn-default">Default size</button>
<button type="button" class="btn btn-default">Default size</button>
</div>

<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default">Large</button>
<button type="button" class="btn btn-default">Large</button>
<button type="button" class="btn btn-default">Large</button>
</div>

<style scoped>
div {margin:10px;}
</style>

Button Toolbar

You can combine button groups together into a single toolbar if required.

To do this, nest the button group inside a <div> element with Bootstrap's .btn-toolbar class applied.

<div class="btn-toolbar" role="toolbar">

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Group 1</button>
<button type="button" class="btn btn-default">Group 1</button>
<button type="button" class="btn btn-default">Group 1</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Group 2</button>
<button type="button" class="btn btn-default">Group 2</button>
</div>

</div>

Combining Dropdowns with Button Groups

You can nest dropdowns within button groups by using a separate button group for the dropdown, then nesting it inside the other one.

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Buy</button>
<button type="button" class="btn btn-default">Sell</button>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

Split Dropdowns

Use button groups to create a split dropdown menu.

<div class="btn-group">
<button type="button" class="btn btn-default">About Us</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</ul>
</div>

Justified Button Groups

Button groups can be justified, so that the button group fills up the full width of its parent and the buttons widths expand accordingly.

The method used for justifying button groups is different, depending on whether the buttons have been created using <button> elements or <a> elements.

Buttons Created with `<a>` Elements

Add Bootstrap's .btn-group-justified to the button group.

<div class="btn-group btn-group-justified" role="group">
<a type="button" class="btn btn-default" role="button">Buy</a>
<a type="button" class="btn btn-default" role="button">Sell</a>
<a type="button" class="btn btn-default" role="button">Hold</a>
</div>

When using the <a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use role="button".

Buttons Created with `<button>` or `<input>` Elements

These button groups require some extra code.

In addition to adding .btn-group-justified to the button group, you must nest each button within its own button group.

<div class="btn-group btn-group-justified" role="group">

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Buy</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Sell</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Hold</button>
</div>

</div>

Bootstrap 3 Button Groups

Horizontal Button Group

Vertical Button Group

Button Group Size

Button Toolbar

Combining Dropdowns with Button Groups

Split Dropdowns

Justified Button Groups

Buttons Created with <a> Elements

Buttons Created with <button> or <input> Elements

Buttons Created with `<a>` Elements

Buttons Created with `<button>` or `<input>` Elements