Button Groups

Prev Next

Wrap several related .btn elements in a .btn-group container and Bootstrap 3 merges their borders and corner radii into one seamless control — perfect for a row of filter buttons or a toolbar. We'll cover horizontal groups, vertical stacks, whole-group sizing, and the justified (full-width, evenly spaced) layout, then build a TrailMap trail-difficulty filter.

Basic .btn-group

Wrap two or more buttons in a <div class="btn-group"> with role="group" for accessibility. The buttons render as one connected unit instead of separate boxes.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Vertical Button Groups

Swap .btn-group for .btn-group-vertical to stack the same buttons on top of each other instead of side by side — useful in a narrow sidebar.

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

Sizing an Entire Group

Instead of sizing each button, add the size class once to the .btn-group wrapper itself and every button inside inherits it:

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-default">Large</button>
  <button type="button" class="btn btn-default">Group</button>
</div>

<div class="btn-group btn-group-sm" role="group"> ... </div>
<div class="btn-group btn-group-xs" role="group"> ... </div>

Justified Button Groups

Add .btn-group-justified to stretch the group across the full width of its container, with every button taking an equal share of the space — handy for a set of tab-like filters on mobile.

<div class="btn-group btn-group-justified" role="group">
  <a href="#" class="btn btn-default">Easy</a>
  <a href="#" class="btn btn-default">Moderate</a>
  <a href="#" class="btn btn-default">Hard</a>
</div>

Bootstrap-3-only: .btn-group-justified is a real class that ships in Bootstrap 3 (it requires the child elements to be <a> tags styled as buttons, not <button> elements, due to how the underlying display:table trick works). It was removed in Bootstrap 4/5 — those versions reach for flexbox utilities like d-flex and flex-fill instead to achieve the same evenly-spaced full-width layout.

TrailMap Example: Difficulty Filter

TrailMap's trail list page lets hikers filter by difficulty with one justified group of three toggle-style buttons, and "Moderate" pre-selected with .active:

<!-- TrailMap: filter trails by difficulty -->
<div class="btn-group btn-group-justified" role="group" aria-label="Trail difficulty filter">
  <a href="?difficulty=easy" class="btn btn-default">Easy</a>
  <a href="?difficulty=moderate" class="btn btn-default active">Moderate</a>
  <a href="?difficulty=hard" class="btn btn-default">Hard</a>
</div>

Up next: Groups of plain buttons are only half the story. In Button Dropdowns we turn one of those buttons into a caret-triggered menu, including a "Save ▾" split button for TrailMap.

Prev Next