Bootstrap Button Groups — Grouped and Toolbar Buttons

In this tutorial, you will learn about Bootstrap Button Groups. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap button groups group buttons horizontally or vertically into a single visual component, with toolbar support for grouping multiple button groups together.

What You'll Learn

You will learn how to create horizontal and vertical button groups, build button toolbars, nest dropdowns in groups, and adjust group sizing.

Why It Matters

Button groups organize related actions. DodaTech's toolbar uses button groups to align pagination controls, while Durga Antivirus uses them for scan mode selection.

Real-World Use

The Doda Browser toolbar uses a button group for zoom controls (zoom out, zoom percentage, zoom in) where the group visually communicates that these controls are related.

flowchart LR
    A[Buttons] --> B[Button Groups]
    B --> C[Horizontal Group]
    B --> D[Vertical Group]
    B --> E[Toolbar]
    B --> F[Sizing]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Button Group

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

Expected output: Three buttons joined together without gaps between them, appearing as one visual unit.

The role="group" attribute tells screen readers that these buttons form a logical group.

Button Group with Mixed Colors

<div class="btn-group" role="group" aria-label="Mixed group">
  <button type="button" class="btn btn-success">Save</button>
  <button type="button" class="btn btn-warning">Edit</button>
  <button type="button" class="btn btn-danger">Delete</button>
</div>

Expected output: Three buttons of different colors joined together, showing that groups work with any button variants.

Button Toolbar

Combine multiple button groups into a toolbar:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="Text controls">
    <button type="button" class="btn btn-outline-secondary">B</button>
    <button type="button" class="btn btn-outline-secondary">I</button>
    <button type="button" class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Alignment">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary">Center</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
  <div class="btn-group" role="group" aria-label="Actions">
    <button type="button" class="btn btn-outline-secondary">Undo</button>
    <button type="button" class="btn btn-outline-secondary">Redo</button>
  </div>
</div>

Expected output: Three separate button groups arranged horizontally with spacing between them, forming a toolbar.

Sizing

<div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Center</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group mb-3" role="group" aria-label="Default group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Center</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group btn-group-sm" role="group" aria-label="Small group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Center</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Expected output: Three button groups in large, default, and small sizes.

Vertical Button Groups

<div class="btn-group-vertical" role="group" aria-label="Vertical group">
  <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>

Expected output: Three buttons stacked vertically, joined together as a single unit.

Nested Dropdowns

<div class="btn-group" role="group" aria-label="Button group with dropdown">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-primary">Edit</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      More
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Export</a></li>
      <li><a class="dropdown-item" href="#">Import</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Delete</a></li>
    </ul>
  </div>
</div>

Expected output: A button group with three visible buttons, the last being a dropdown toggle that opens a menu.

Checkbox and Radio Button Groups

<div class="btn-group" role="group" aria-label="Checkbox group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Option 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Option 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Option 3</label>
</div>

Expected output: Three toggle buttons where multiple can be selected simultaneously (checkbox behavior).

Common Mistakes

1. Missing role="group" on Button Groups

The role="group" attribute is essential for Accessibility. Without it, screen readers do not announce the relationship between grouped buttons.

2. Using btn-toolbar Without btn-group

btn-toolbar wraps multiple btn-group elements. Using it with individual buttons (not in groups) defeats its purpose.

3. Nesting Dropdowns Without Proper Markup

Dropdowns in button groups need the inner btn-group wrapper to position the dropdown menu correctly.

4. Overlapping Group Sizing

Setting btn-group-lg on the group and btn-sm on individual buttons creates sizing conflicts. Use one sizing method consistently.

5. Not Wrapping Long Toolbars

Long toolbars can overflow on mobile. Use flex-wrap or responsive display classes to handle wrapping.

Practice Questions

1. What HTML attribute tells screen readers that buttons form a group? role="group" on the button group container.

2. How do you create a vertical button group? Use btn-group-vertical instead of btn-group.

3. What is a button toolbar used for? A button toolbar groups multiple button groups together in a horizontal row, typically for related tool sets.

4. How do you adjust the size of all buttons in a group? Add btn-group-lg or btn-group-sm to the btn-group container.

5. Can button groups contain dropdowns? Yes. Nest a btn-group with a dropdown-toggle inside the parent button group.

Challenge

Build a text editor toolbar with four button groups: font controls (B, I, U), alignment (left, center, right), list controls (bullets, numbers), and an actions dropdown (undo, redo, clear).

FAQ

Mini Project

Build a media player control bar with button groups for playback (play, pause, stop), navigation (previous, next), and volume (mute, volume down, volume up). Use icons inside the buttons.

What's Next

Master Navbar for navigation components. Then explore Navs and Tabs for tabbed navigation.