Bootstrap Button Groups

Bootstrap is giving feature to make a group of multiple buttons which can be stacked together in a single line. This is very useful feature when you have required placing buttons together. You can also add optional JavaScript checkboxes and radio buttons style behavior with Bootstrap Button Plugin.

Below we are summarizing the Bootstrap provided the important classes to use button groups.

.btn-group

This class .btn-group used for basic button group. Wrap the series of button using .btn class in .btn-group.

<div class="btn-group">
 <button type="button" class="btn btn-default">Button1</button>
 <button type="button" class="btn btn-default">Button2</button>
</div>

.btn-toolbar

This class helps to combine sets of buttons (<div class="btn-group">) into a toolbar (<div class="btn-toolbar">) style for more complex components.

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">...</div>
 <div class="btn-group">...</div>
</div>

.btn-group-lg, .btn-group-sm, .btn-group-xs

These classes can be functional to button group instead of resizing every button.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

.btn-group-vertical

This class use for change appearance vertically stacked rather than horizontally a set of buttons.

<div class="btn-group-vertical">
 ...
</div>

Basic Button Group

Following examples demonstrates the use of class .btn-group discussed in the above:

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

Demo

Button Toolbar

This examples shows the use of class .btn-toolbar discussed in the above:

<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 type="button" class="btn btn-default">Button 8</button>
 <button type="button" class="btn btn-default">Button 9</button>
 </div>
</div>

Demo

Button Size

This examples shows the use of class .btn-group-* discussed in the above table:

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

Demo

Nesting

Place a button groups within another button group i.e, place a .btn-group within another .btn-group. This is ready when you want dropdown menus mixed with a series of buttons.

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

Demo

Vertical Buttongroup

This examples shows the use of class .btn-group-vertical discussed in the above:

<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>
 <li><a href="#">Dropdown link 2</a></li>
 </ul>
 </div>

 <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>
 <li><a href="#">Dropdown link 2</a></li>
 </ul>
 </div>

 <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>
 <li><a href="#">Dropdown link 2</a></li>
 </ul>
 </div>

</div>

Demo

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.

With <a> elements

Just wrap a series of .btns in .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified">
	<a class="btn btn-default" role="button">Left</a>
	<a class="btn btn-default" role="button">Middle</a>
	<a class="btn btn-default" role="button">Right</a>
</div>

<br>

<div class="btn-group btn-group-justified">
	<a class="btn btn-default" role="button">Left</a>
	<a class="btn btn-default" role="button">Middle</a>
	<div class="btn-group">
		<a class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a>

		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>
	</div>
</div>

Demo

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 workaround that.

<div class="btn-group btn-group-justified">
	<div class="btn-group">
		<button type="button" class="btn btn-default">Left</button>
	</div> 
	<div class="btn-group">
		<button type="button" class="btn btn-default">Middle</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">Right</button>
	</div>
</div>

Demo

Bootstrap Button Groups