Bootstrap Button Groups

Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group:

<div class="btn-group">  <button type="button" class="btn btn-primary">Apple</button>  <button type="button" class="btn btn-primary">Samsung</button>  <button type="button" class="btn btn-primary">Sony</button></div>

<div class="btn-group btn-group-lg">  <button type="button" class="btn btn-primary">Apple</button>  <button type="button" class="btn btn-primary">Samsung</button>  <button type="button" class="btn btn-primary">Sony</button></div> 

Vertical Button Groups

Bootstrap also supports vertical button groups:

Use the class .btn-group-vertical to create a vertical button group:

<div class="btn-group-vertical">  <button type="button" class="btn btn-primary">Apple</button>  <button type="button" class="btn btn-primary">Samsung</button>  <button type="button" class="btn btn-primary">Sony</button></div> 

Justified Button Groups

To span the entire width of the screen, use the .btn-group-justified class:

Example with <a> elements:

<div class="btn-group btn-group-justified">  <a href="#" class="btn btn-primary">Apple</a>  <a href="#" class="btn btn-primary">Samsung</a>  <a href="#" class="btn btn-primary">Sony</a></div> 

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus:

<div class="btn-group">  <button type="button" class="btn btn-primary">Apple</button>  <button type="button" class="btn btn-primary">Samsung</button>  <div class="btn-group">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">    Sony <span class="caret"></span></button>    <ul class="dropdown-menu" role="menu">      <li><a href="#">Tablet</a></li>      <li><a href="#">Smartphone</a></li>    </ul>  </div></div> 

Split Button Dropdowns

<div class="btn-group">  <button type="button" class="btn btn-primary">Sony</button>  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">    <span class="caret"></span>  </button>  <ul class="dropdown-menu" role="menu">    <li><a href="#">Tablet</a></li>    <li><a href="#">Smartphone</a></li>  </ul></div>