Bootstrap Button Group
Button groups allow multiple buttons to be stacked in the same row. This is particularly useful when you want to align buttons together. You can add optional JavaScript radio and checkbox style behaviors via the Bootstrap Button (Button) Plugin.
The following table summarizes some important classes provided by Bootstrap for using button groups:
| Class | Description | Code Example |
|---|---|---|
| .btn-group | This class is used to form a basic button group. Place a series of buttons with the class .btn inside a .btn-group. | <div class="btn-group"><br> <button type="button" class="btn btn-default">Button1</button><br> <button type="button" class="btn btn-default">Button2</button><br></div> |
| .btn-toolbar | This class helps to combine several <div class="btn-group"> into a <div class="btn-toolbar"> to create more complex components. | <div class="btn-toolbar" role="toolbar"><br> <div class="btn-group">...</div><br> <div class="btn-group">...</div><br></div> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | These classes can be applied to the entire button group for size adjustment without needing to adjust each button individually. | <div class="btn-group btn-group-lg">...</div><br><div class="btn-group btn-group-sm">...</div><br><div class="btn-group btn-group-xs">...</div> |
| .btn-group-vertical | This class makes a group of buttons stack vertically instead of horizontally. | <div class="btn-group-vertical"><br> ...<br></div> |
Basic Button Group
The following example demonstrates the use of the class .btn-group discussed in the table above:
Example
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
The result is as follows:
Button Toolbar
The following example demonstrates the use of the class .btn-toolbar discussed in the table above:
Example
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button 7</button>
Button Sizes
The following example demonstrates the use of the classes .btn-group-* discussed in the table above:
Example
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Button 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default">Button 8</button>
<button type="button" class="btn btn-default">Button 9</button>
</div>
Nesting
You can nest button groups within another button group, i.e., place a .btn-group within another .btn-group. This is useful when you want to combine dropdown menus with a series of buttons.
Example
<div class="btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
</ul>
</div>
</div>
Vertical Button Group
The following example demonstrates the use of the class .btn-group-vertical:
Example
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
</ul>
</div>
</div>
<li><a href="#">Dropdown Link 2</a></li>
</ul>
</div>
</div>