Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
<!--
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>These classes can also be added to groups of links, as an alternative to the navigation components.
<!--
Button Group with active --><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> <!-- Mixed
Style -->
<div class="btn-group"
role="group"
aria-label="Basic mixed styles example">
<button type="button"
class="btn
btn-danger">Left</button>
<button type="button"
class="btn
btn-warning">Middle</button>
<button type="button"
class="btn
btn-success">Right</button>
</div> <!--
Outline Styled -->
<div class="btn-group"
role="group"
aria-label="Basic outlined example">
<button type="button"
class="btn
btn-outline-primary">Left</button>
<button type="button"
class="btn
btn-outline-primary">Middle</button>
<button type="button"
class="btn
btn-outline-primary">Right</button>
</div> <!--
Checkbox and radio button groups -->
<div class="btn-group" role="group"
aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div> <!--
Checkbox and radio button groups -->
<div class="btn-group"
role="group"
aria-label="Basic radio toggle button group">
<input type="radio"
class="btn-check"
name="btnradio"
id="btnradio1"
autocomplete="off" checked>
<label class="btn
btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio"
class="btn-check"
name="btnradio"
id="btnradio2"
autocomplete="off">
<label class="btn
btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio"
class="btn-check"
name="btnradio"
id="btnradio3"
autocomplete="off">
<label class="btn
btn-outline-primary" for="btnradio3">Radio 3</label>
</div> <!--
Button Toolbar -->
<div class="btn-toolbar" role="toolbar"
aria-label="Toolbar with
button groups">
<div class="btn-group
me-2" 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-2" role="group" aria-label="Second
group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group"
aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div> <!--
Button Sizing -->
<div class="btn-group
btn-group-lg mb-2" role="group" aria-label="Large button
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>
<!-- Button Sizing -->
<br>
<div class="btn-group
mb-2" role="group" aria-label="button
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>
<!-- Button Sizing -->
<br>
<div class="btn-group
btn-group-sm mb-2" role="group" aria-label="Small button
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> <!--
Button Nesting -->
<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-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<!--
Button Vertical Align -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button
group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button"
class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px;
left: 0px; transform: translate3d(0px, 38px, 0px);">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button"
class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button"
class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button"
class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>