Button Groups

Prev Next

Wrap a set of .btn elements in a .btn-group to visually merge them into one connected control — the standard pattern for toolbars, filter toggles, and view switchers.

1. Basic Horizontal Group: .btn-group

Give the wrapper role="group" for accessibility, then place plain .btn buttons inside it as siblings.

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

2. Vertical Group: .btn-group-vertical

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

3. Sizing the Whole Group

Skip sizing each individual button — put .btn-group-lg or .btn-group-sm on the .btn-group wrapper itself and every button inside inherits the size.

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

4. Nesting a Dropdown Inside a Group

A dropdown button can live inside a .btn-group alongside plain buttons. It uses the same data-toggle="dropdown" attribute covered in full in the later Dropdowns lesson.

<div class="btn-group" role="group">
  <button type="button" class="btn btn-secondary">Nearby trails</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
      Sort by
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Distance</a>
      <a class="dropdown-item" href="#">Rating</a>
    </div>
  </div>
</div>

data-toggle, not data-bs-toggle. Bootstrap 4's interactive components — this dropdown included — read plain data-toggle/data-target attributes via jQuery. Bootstrap 5 namespaced every one of these to data-bs-toggle/data-bs-target; mixing the two prefixes across a Bootstrap 4 page will simply do nothing.

5. Worked Example: TrailMap Difficulty Filter

TrailMap's trail listing page uses a button group as a difficulty filter toggle above the results — a compact, connected alternative to a row of checkboxes.

<div class="btn-group" role="group" aria-label="Filter by difficulty">
  <button type="button" class="btn btn-outline-success active">Easy</button>
  <button type="button" class="btn btn-outline-warning">Moderate</button>
  <button type="button" class="btn btn-outline-danger">Hard</button>
</div>

Next up: that filter group used plain buttons, but a compact status label like "Easy" also works great as a badge — the next lesson covers the full badge component.

Prev Next