Button Groups

Button Groups

Button groups let you group multiple buttons together on a single line, joined together as one visual unit.

Basic button group

Wrap buttons in a .btn-group container:

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

Sizing button groups

Use size classes on the group to size all buttons:

• .btn-group-lg large
• .btn-group-sm small

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Large</button>
</div>

Vertical button group

Use .btn-group-vertical to stack buttons vertically:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>

Nesting dropdowns

Button groups can be nested inside a .btn-group container, which is commonly used for dropdown menus.

TL;DR

• Wrap buttons in .btn-group to join them.
• .btn-group-lg and .btn-group-sm size the whole group.
• .btn-group-vertical stacks buttons vertically.
• Groups are great for dropdown menus.