Button groups with different sizes : To create button groups with different sizes (i.e large, small and extra small) use btn-group-lg, btn-group-sm and btn-group-xs classes respectively

<divclass="btn-toolbar">

<divclass="btn-group
btn-group-lg">

<ahref="#"class="btn btn-danger">Button 1</a>

<ahref="#"class="btn btn-default">Button 2</a>

</div>

<divclass="btn-group
btn-group-sm">

<ahref="#"class="btn btn-info">Button 3</a>

<ahref="#"class="btn btn-primary">Button 4</a>

<ahref="#"class="btn btn-success">Button 5</a>

</div>

<divclass="btn-group
btn-group-xs">

<ahref="#"class="btn btn-warning">Button 6</a>

<ahref="#"class="btn btn-primary">Button 7</a>

</div>

</div>

Vertical button group : To create a vertical button group use btn-group-vertical class

<divclass="btn-toolbar">

<divclass="btn-group-vertical
btn-group-lg">

<ahref="#"class="btn btn-danger">Button 1</a>

<ahref="#"class="btn btn-default">Button 2</a>

</div>

<divclass="btn-group-vertical
btn-group-sm">

<ahref="#"class="btn btn-info">Button 3</a>

<ahref="#"class="btn btn-primary">Button 4</a>

<ahref="#"class="btn btn-success">Button 5</a>

</div>

<divclass="btn-group-vertical
btn-group-xs">

<ahref="#"class="btn btn-warning">Button 6</a>

<ahref="#"class="btn btn-primary">Button 7</a>

</div>

</div>

Nested button groups : To create a button group with a dropdown menu, nest button groups

<divclass="btn-group">

<ahref="#"class="btn btn-danger">Button 1</a>

<ahref="#"class="btn btn-default">Button 2</a>

<divclass="btn-group">

<buttondata-toggle="dropdown"class="btn btn-primary dropdown-toggle">

Dropdown

<spanclass="caret"></span>

</button>

<ulclass="dropdown-menu">

<li><ahref="#">Action 1</a></li>

<li><ahref="#">Action 2</a></li>

<li><ahref="#">Action 3</a></li>

</ul>

</div>

</div>

Justified hyperlink elements button group : To create a justified hyperlink elements button group that span the entire width of it's parent use btn-group and btn-group-justified classes.

<divclass="btn-group
btn-group-justified">

<ahref="#"class="btn btn-danger">Button 1</a>

<ahref="#"class="btn btn-default">Button 2</a>

<ahref="#"class="btn btn-info">Button 3</a>

<ahref="#"class="btn btn-primary">Button 4</a>

<ahref="#"class="btn btn-success">Button 5</a>

<ahref="#"class="btn btn-warning">Button 6</a>

</div>

Justified button elements (i.e <button>, <input type="button"> and <input type="submit">) button group : To create a justified button group of button elements use btn-group and btn-group-justified classes. In addition you must also wrap each button in a <div> element with btn-group class.