Button Group
Group a series of buttons together on a single line or stack them in a vertical column using the button group component.
Basic example
Wrap a series of buttons with .btn in a .btn-group.
HTML
<!-- 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>Button toolbar
Combine sets of button groups into a button toolbar for more complex components. Use utility classes as needed.
HTML
<!-- Button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-outline-secondary">5</button>
<button type="button" class="btn btn-outline-secondary">6</button>
<button type="button" class="btn btn-outline-secondary">7</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary">8</button>
</div>
</div>Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally with .btn-group-vertical.
HTML
<!-- Vertical button group -->
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-outline-secondary">Button 1</button>
<button type="button" class="btn btn-outline-secondary">Button 2</button>
<button type="button" class="btn btn-outline-secondary">Button 3</button>
</div>