Button group

Group a series of buttons together on a single line with the button group.

Basic example

Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Button toolbar

Combine sets of button groups into button toolbars for more complex components.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary"><span class="icon icon-paperclip"></span></button>
    <button type="button" class="btn btn-secondary"><span class="icon icon-pencil"></span></button>
    <button type="button" class="btn btn-secondary"><span class="icon icon-brand-github"></span></button> 
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary"><span class="icon icon-bin"></span></button>
    <button type="button" class="btn btn-secondary"><span class="icon icon-nav-show-vertical"></span></button> 
  </div> 
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Dropdown link Dropdown link 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle dropdown-unstyled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

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