Button Group
Group a series of buttons together on a single line or stack them in a vertical column.
Group Basic
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary active">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Outline 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>
<div class="btn-group" role="group" aria-label="Mixed 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>
<div class="btn-group" role="group" aria-label="Mixed example soft">
<button type="button" class="btn btn-danger btn-soft">Left</button>
<button type="button" class="btn btn-warning btn-soft">Middle</button>
<button type="button" class="btn btn-success btn-soft">Right</button>
</div>
Group Checkbox & Radio
<div class="btn-group btn-group-sm" role="group" aria-label="Checkbox group example">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-secondary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-secondary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-secondary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Radio group example">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-secondary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-secondary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-secondary" for="btnradio3">Radio 3</label>
</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 button group">
<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-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>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar button group mixed">
<div class="btn-group me-2" role="group" aria-label="First 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="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
Button Group Size
<div class="btn-group btn-group-sm" role="group" aria-label="Button group sm">
<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>
<div class="btn-group" role="group" aria-label="Button group default">
<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>
<div class="btn-group btn-group-lg" role="group" aria-label="Button group lg">
<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>
Button Group Nesting
<div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-warning">1</button>
<button type="button" class="btn btn-warning">2</button>
<div class="btn-group btn-group-sm" role="group">
<button id="btnGroupNest" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<ul class="dropdown-menu shadow-lg p-3 my-0" aria-labelledby="btnGroupNest">
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<span>Set active</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
<span>Set inactive</span>
</a>
</li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span>Add Item</span>
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item rounded" href="#">
<svg class="text-gray-600" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
<span class="w-100">Delete</span>
<span class="badge bg-gray-500 rounded-pill float-end">3</span>
</a>
</li>
</ul>
</div>
</div>
Button Group Vertical
<!-- .btn-group-vertical class used -->
<div class="btn-group-vertical" role="group" aria-label="Button group vertical">
<button type="button" class="btn btn-secondary">Button 1</button>
<button type="button" class="btn btn-secondary">Button 2</button>
<button type="button" class="btn btn-secondary">Button 3</button>
<button type="button" class="btn btn-secondary">Button 4</button>
</div>