Button groups

A toggle button is visual control for showing one of several possible states with explicit labelings. Read more about toggle buttons in the UX Guidelines.

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in .btn-group and .btn-toolbar.

Use when:

  • The user needs to choose one value out of a predefined set of options, e.g. for filtering a grid
  • It is useful to see all the options available at one glance
  • The selected choice needs to be visually prominent
  • You want the control to use minimal vertical space
  • You want it to run on touch screens (too), since checkboxes are typically too small for finger touch area

Design

Button groups

Wrap a series of buttons with .btn in .btn-group. There is a .btn-group-primary version availabel but the difference between default and primary is visible only on the active state.

Button toolbars

Combine sets of <div class="btn-group" role="group"> into a <div class="btn-toolbar" role="toolbar"> for more complex components.

Sizes - Large option

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

Active state

Add selected/active state on one of the buttons from the group by adding .active class.

Disabled state

Add disabled state on each button that you need from the group by adding .disabled class or add the disabled attribute or add the .disabled class on the .btn-group directly to make all the elements inactive.

With dropdowns

Add a .dropdown inside a .btn-groups. Check the code example from the code section.

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally. Dropdowns and split buttons are not supported here.

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. Add .btn-group-justified to make this.

Left Middle Right 
				
<!-- Button group - .btn-group -->
<div class="btn-group" role="group" aria-label="Button group">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

<div class="btn-group btn-group-primary" role="group" aria-label="Button group">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

<!-- Button toolbar - .btn-toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="Button group">
      <button type="button" class="btn">Left</button>
      <button type="button" class="btn">Middle</button>
      <button type="button" class="btn">Right</button>
   </div>
   <button type="button" class="btn">Button</button>
</div>

<!-- Large button group - .btn-group-lg -->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

<!-- Active state on button group -->
<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn active" aria-selected="true">Right</button>
</div>

<div class="btn-group btn-group-primary" role="group" aria-label="...">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn active" aria-selected="true">Right</button>
</div>

<!-- Disabled state on button group -->
<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn disabled" aria-disabled="true">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

<div class="btn-group disabled" role="group" aria-label="...">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn active" aria-selected="true">Right</button>
</div>

<!-- Button group with dropdowns -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <div class="dropdown">
      <button type="button" id="dropdownMenu1" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown
      </button>
      <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options>
         <li><a href="#">Action</a></li>
         ...
         <li><a href="#">Action</a></li>
      </ul>
   </div>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

<!-- Vertical button group - .btn-group-vertical -->
<div class="btn-group-vertical" role="group" aria-label="...">
   <button type="button" class="btn">Top</button>
   <button type="button" class="btn disabled" aria-disabled="true">Middle</button>
   <button type="button" class="btn active" aria-selected="true">Middle</button>
   <button type="button" class="btn">Bottom</button>
</div>

<!-- Justified button groups - .btn-group-justified -->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
   <a href="#" class="btn">Left</a>
   <a href="#" class="btn">Middle</a>
   <a href="#" class="btn">Right</a>
</div>