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.

Default

Primary

					


<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 with alternative style">
   <button type="button" class="btn">Left</button>
   <button type="button" class="btn">Middle</button>
   <button type="button" class="btn">Right</button>
</div>

Button toolbars

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

					


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

Sizes - Large version

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

Default

Primary

					
					

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




<div class="btn-group btn-group-primary btn-group-lg" role="group" aria-label="Button group with alternative style">
   ...
</div>

Active state

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

Defaut

Primary

					


<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 active" aria-selected="true">Right</button>
</div>




<div class="btn-group btn-group-primary" role="group" aria-label="Button group with alternative style">
   <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

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. 


					


<div class="btn-group" role="group" aria-label="Disabled button group">
   <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="Disabled button group">
   <button type="button" class="btn" aria-disabled="true">Left</button>
   <button type="button" class="btn" aria-disabled="true">Middle</button>
   <button type="button" class="btn" aria-disabled="true">Right</button>
</div>

With dropdowns

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

Regular

Large

					


<div class="btn-group" role="group" aria-label="Disabled button group">
   <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="Disabled button group">
   <button type="button" class="btn" aria-disabled="true">Left</button>
   <button type="button" class="btn" aria-disabled="true">Middle</button>
   <button type="button" class="btn" aria-disabled="true">Right</button>
</div>

Vertical button groups

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

					


<div class="btn-group-vertical" role="group" aria-label="...">
   <button type="button" class="btn">Top</button>
   <button type="button" class="btn disabled"  tabindex="-1" 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

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.

Defaut

Primary

Left Middle Middle Middle Right

With dropdowns

Middle Right 
					

Default



<div class="btn-group btn-group-justified" 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>



Primary



<div class="btn-group btn-group-primary 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>