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).
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>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>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>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>role="group" (or role="toolbar" for a toolbar of several groups) along with an aria-label.
.btn-group container — repeating it on each button is redundant and can cause inconsistent spacing.
A second example — combining several small button groups into one toolbar, a common pattern for text editor controls:
<div class="btn-toolbar" role="toolbar" aria-label="Text formatting toolbar">
<div class="btn-group me-2" role="group" aria-label="Text style">
<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" 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>
</div>
</div>Q: Can button groups contain dropdowns?
A: Yes — nest a Bootstrap dropdown's button and menu inside a .btn-group to add a dropdown as one of the grouped controls.
Q: How do I make one button in a group look "active" or selected?
A: Add the .active class to that specific button, and optionally aria-pressed="true" for accessibility.
Q: Do button groups automatically become checkbox/radio toggles?
A: Not automatically — you need to combine them with btn-check hidden inputs and labels. See the official Button Group documentation for the checkbox/radio toggle pattern.