Bootstrap Button Groups
Button groups let you combine multiple related buttons into a single, visually connected unit. Use the .btn-group class on a wrapping element containing several .btn elements.
You can also stack button groups vertically with .btn-group-vertical, or nest a dropdown menu inside a button group for a combined action-and-options control.
<div class="btn-group" role="group">
<button class="btn btn-primary">One</button>
<button class="btn btn-primary">Two</button>
</div>Basic button groups
Wrap multiple .btn elements in a container with class .btn-group and role="group" to visually connect them with shared borders and no extra spacing between them.
Vertical and sized groups
Use .btn-group-vertical to stack buttons on top of each other. Add size classes like .btn-group-lg to the group container to size all buttons inside consistently.
<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>Three gray buttons joined together with no gapsbtn-group visually merges the buttons into a single connected control.
<div class="btn-group-vertical" role="group">
<button class="btn btn-outline-primary">Top</button>
<button class="btn btn-outline-primary">Bottom</button>
</div>Two outlined buttons stacked verticallybtn-group-vertical stacks the buttons instead of placing them side by side.
Key points
- .btn-group visually connects multiple buttons into one unit.
- Add role="group" for accessibility.
- .btn-group-vertical stacks buttons on top of each other.
- Button groups can contain nested dropdowns for combined controls.