Button Group
Basic Example #
Wrap a series of buttons with
.btn
in
.btn-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 button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-3" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button
><button type="button" class="btn btn-primary">3</button
><button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-3" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button
><button type="button" class="btn btn-secondary">6</button
><button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
Sizing #
Instead of applying button sizing classes to every button in a group, just add
.btn-group-*
to each
.btn-group
, including each one when nesting multiple groups.
<div class="row g-3">
<div class="col-auto">
<div class="btn-group btn-group-lg" role="group" aria-label="Large group">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button
><button type="button" class="btn btn-primary">3</button>
</div>
</div>
<div class="col-auto">
<div class="btn-group" role="group" aria-label="Normal group">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button
><button type="button" class="btn btn-primary">3</button>
</div>
</div>
<div class="col-auto">
<div class="btn-group btn-group-sm" role="group" aria-label="Small group">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button
><button type="button" class="btn btn-primary">3</button>
</div>
</div>
</div>
Nesting #
Place a
.btn-group
within another
.btn-group
when you want dropdown menus mixed with a series of buttons.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button
id="btnGroupDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Vertical Variation #
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">1</button
><button type="button" class="btn btn-primary">2</button
><button type="button" class="btn btn-primary">3</button>
</div>