Bootstrap Button Groups

Bootstrap allows you to take several individual buttons and physically fuse them together into a single, cohesive line using a Button Group.

This is extremely useful when building pagination menus, media player controls (Play/Pause/Skip), or text formatting toolbars (Bold/Italic/Underline).

---

1. Basic Button Group

To fuse buttons together, wrap a series of buttons (with standard .btn classes) inside a container <div> that has the .btn-group class.

<!-- Wrapping the buttons in a .btn-group -->
<div class="btn-group" role="group" aria-label="Basic Group">
    <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>

Mixing Colors

You can mix and match different contextual colors inside the same group. Bootstrap handles flattening the interior borders so they line up perfectly.

<div class="btn-group" role="group">
    <button type="button" class="btn btn-danger">Cancel</button>
    <button type="button" class="btn btn-warning">Reset</button>
    <button type="button" class="btn btn-success">Save</button>
</div>

---

2. Button Group Sizing

Instead of applying sizing classes (like .btn-lg) to every single button individually, you can apply one unified sizing class directly to the .btn-group wrapper itself!

• .btn-group-lg for larger buttons.
• .btn-group-sm for smaller, compact buttons.

<!-- Forces all buttons inside to scale large -->
<div class="btn-group btn-group-lg" role="group">
    ...
</div>

---

3. Vertical Button Groups

Do you need the buttons to stack cleanly on top of each other rather than laying out horizontally? Just replace .btn-group with .btn-group-vertical.

Bootstrap will instantly stack them, flattening the interior horizontal borders while perfectly rounding the top-left, top-right, bottom-left, and bottom-right exterior edges.

<!-- Note: Using .btn-group-vertical instead of .btn-group -->
<div class="btn-group-vertical" role="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>