Button groups join related buttons into one control: segmented switches, toolbars, split buttons and pagers. Add role="group" and an aria-label, and use btn-check checkboxes or radios when the group should remember a selection.
1Basic group
Buttons joined into one control with .btn-group and role="group".
<div class="btn-group" role="group" aria-label="Text alignment">
<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>2Outline group
Outline buttons with an active middle item.
<div class="btn-group" role="group" aria-label="Period">
<button type="button" class="btn btn-outline-primary">Day</button>
<button type="button" class="btn btn-outline-primary active" aria-current="true">Week</button>
<button type="button" class="btn btn-outline-primary">Month</button>
<button type="button" class="btn btn-outline-primary">Year</button>
</div>3Group sizes
btn-group-lg and btn-group-sm size every button in the group at once.
<div class="flex flex-col items-start gap-2">
<div class="btn-group btn-group-lg" role="group" aria-label="Large group">
<button type="button" class="btn btn-outline-dark">Large</button>
<button type="button" class="btn btn-outline-dark">Two</button>
<button type="button" class="btn btn-outline-dark">Three</button>
</div>
<div class="btn-group" role="group" aria-label="Default group">
<button type="button" class="btn btn-outline-dark">Default</button>
<button type="button" class="btn btn-outline-dark">Two</button>
<button type="button" class="btn btn-outline-dark">Three</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small group">
<button type="button" class="btn btn-outline-dark">Small</button>
<button type="button" class="btn btn-outline-dark">Two</button>
<button type="button" class="btn btn-outline-dark">Three</button>
</div>
</div>4Vertical group
btn-group-vertical stacks the buttons, handy for side tool panels.
<div class="btn-group-vertical" role="group" aria-label="Tools">
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-cursor-fill" aria-hidden="true"></i> Select</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-brush-fill" aria-hidden="true"></i> Brush</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-eraser-fill" aria-hidden="true"></i> Eraser</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-fonts" aria-hidden="true"></i> Text</button>
</div>5Editor toolbar
Several groups inside a .btn-toolbar make a rich-text editor toolbar.
<div class="btn-toolbar gap-2" role="toolbar" aria-label="Formatting">
<div class="btn-group btn-group-sm" role="group" aria-label="Text style">
<button type="button" class="btn btn-outline-secondary" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Underline"><i class="bi bi-type-underline" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Strikethrough"><i class="bi bi-type-strikethrough" aria-hidden="true"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Alignment">
<button type="button" class="btn btn-outline-secondary" aria-label="Align left"><i class="bi bi-text-left" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Align centre"><i class="bi bi-text-center" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Align right"><i class="bi bi-text-right" aria-hidden="true"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Insert">
<button type="button" class="btn btn-outline-secondary" aria-label="Insert link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Insert image"><i class="bi bi-image-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Bulleted list"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary" aria-label="Numbered list"><i class="bi bi-list-ol" aria-hidden="true"></i></button>
</div>
</div>6Checkbox toggle group
btn-check checkboxes styled as a group; any number can be on.
<div class="btn-group" role="group" aria-label="Notification channels">
<input type="checkbox" class="btn-check" id="chk-851" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="chk-851">Email</label>
<input type="checkbox" class="btn-check" id="chk-852" autocomplete="off">
<label class="btn btn-outline-primary" for="chk-852">SMS</label>
<input type="checkbox" class="btn-check" id="chk-853" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="chk-853">Push</label>
</div>7Radio toggle group
btn-check radios: exactly one option is selected, like a billing period switch.
<div class="btn-group" role="group" aria-label="Billing period">
<input type="radio" class="btn-check" name="plan-854" id="rad-855" autocomplete="off" checked>
<label class="btn btn-outline-success" for="rad-855">Monthly</label>
<input type="radio" class="btn-check" name="plan-854" id="rad-856" autocomplete="off">
<label class="btn btn-outline-success" for="rad-856">Yearly (save 16%)</label>
</div>8Group with dropdown
Nest a .btn-group with a dropdown to add more options to the end.
<div class="btn-group" role="group" aria-label="Export options">
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-printer-fill" aria-hidden="true"></i> Print</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i> PDF</button>
<div class="btn-group" role="group">
<button type="button" id="grp-dd-857" class="btn btn-outline-secondary dropdown-toggle" data-ui-toggle="dropdown" aria-expanded="false">More</button>
<ul class="dropdown-menu" aria-labelledby="grp-dd-857">
<li><a class="dropdown-item" href="#">Excel</a></li>
<li><a class="dropdown-item" href="#">CSV</a></li>
<li><a class="dropdown-item" href="#">JSON</a></li>
</ul>
</div>
</div>9Split button
A main action plus a caret that opens related actions.
<div class="btn-group">
<button type="button" class="btn btn-success"><i class="bi bi-check2-circle" aria-hidden="true"></i> Publish</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-ui-toggle="dropdown" aria-expanded="false"><span class="sr-only">More publish options</span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="bi bi-calendar-event-fill" aria-hidden="true"></i> Schedule</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-eye-slash" aria-hidden="true"></i> Publish privately</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Save as draft</a></li>
</ul>
</div>10Pager group
Previous, page numbers and next as one group.
<div class="btn-group" role="group" aria-label="Pages">
<button type="button" class="btn btn-outline-secondary" aria-label="Previous page"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-secondary" aria-current="page">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary" aria-label="Next page"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
</div>11View switcher
Icon-only radio group to switch between grid, list and board views.
<div class="btn-group" role="group" aria-label="View">
<input type="radio" class="btn-check" name="view-858" id="view-grid-859" autocomplete="off" checked>
<label class="btn btn-outline-secondary" for="view-grid-859" title="Grid"><i class="bi bi-grid-3x3-gap-fill" aria-hidden="true"></i><span class="sr-only">Grid</span></label>
<input type="radio" class="btn-check" name="view-858" id="view-list-860" autocomplete="off">
<label class="btn btn-outline-secondary" for="view-list-860" title="List"><i class="bi bi-list-ul" aria-hidden="true"></i><span class="sr-only">List</span></label>
<input type="radio" class="btn-check" name="view-858" id="view-board-861" autocomplete="off">
<label class="btn btn-outline-secondary" for="view-board-861" title="Board"><i class="bi bi-kanban-fill" aria-hidden="true"></i><span class="sr-only">Board</span></label>
</div>12Toolbar with input group
Mix button groups and an input group in one toolbar; justify-content spreads them out.
<div class="btn-toolbar justify-between gap-2" role="toolbar" aria-label="Table toolbar">
<div class="btn-group" role="group" aria-label="Bulk actions">
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-archive-fill" aria-hidden="true"></i> Archive</button>
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-tag-fill" aria-hidden="true"></i> Label</button>
</div>
<div class="input-group" style="max-width: 260px;">
<span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="form-control" id="tb-search-862" placeholder="Search" aria-label="Search">
</div>
</div>13Media player controls
Round icon buttons grouped around a larger play button.
Elegant launch
Mateo Carter
<div class="flex items-center gap-4">
<img src="https://images.unsplash.com/photo-1605130284535-11dd9eedc58a?auto=format&fit=crop&w=800&h=800&q=70" alt="Album cover" class="rounded-md" width="56" height="56">
<div class="grow">
<div class="font-semibold">
Elegant launch
</div>
<div class="small text-muted">
Mateo Carter
</div>
</div>
<div class="btn-group" role="group" aria-label="Player">
<button type="button" class="btn btn-light" aria-label="Previous track"><i class="bi bi-skip-backward-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary px-4" aria-label="Play"><i class="bi bi-play-fill" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light" aria-label="Next track"><i class="bi bi-skip-forward-fill" aria-hidden="true"></i></button>
</div>
</div>14Segmented filter with counts
A radio group with badges, used to filter a list by status.
<div class="btn-group" role="group" aria-label="Filter projects">
<input type="radio" class="btn-check" name="seg-863" id="seg-opt-864" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="seg-opt-864">All <span class="badge text-bg-secondary">59</span></label>
<input type="radio" class="btn-check" name="seg-863" id="seg-opt-865" autocomplete="off">
<label class="btn btn-outline-primary" for="seg-opt-865">Active <span class="badge text-bg-secondary">12</span></label>
<input type="radio" class="btn-check" name="seg-863" id="seg-opt-866" autocomplete="off">
<label class="btn btn-outline-primary" for="seg-opt-866">Archived <span class="badge text-bg-secondary">2</span></label>
</div>15Vertical option list
A vertical radio group where each option shows a label and extra detail.
<div class="btn-group-vertical w-full" role="group" aria-label="Delivery" style="max-width: 320px;">
<input type="radio" class="btn-check" name="ship-867" id="ship-opt-868" autocomplete="off" checked>
<label class="btn btn-outline-secondary flex justify-between text-start" for="ship-opt-868"><span>Standard</span><span class="small">3-5 days</span></label>
<input type="radio" class="btn-check" name="ship-867" id="ship-opt-869" autocomplete="off">
<label class="btn btn-outline-secondary flex justify-between text-start" for="ship-opt-869"><span>Express</span><span class="small">1-2 days</span></label>
<input type="radio" class="btn-check" name="ship-867" id="ship-opt-870" autocomplete="off">
<label class="btn btn-outline-secondary flex justify-between text-start" for="ship-opt-870"><span>Pickup</span><span class="small">Today</span></label>
</div>16Mixed colours
Different variants in one group, e.g. approve, hold and reject.
<div class="btn-group" role="group" aria-label="Review decision">
<button type="button" class="btn btn-success"><i class="bi bi-check-lg" aria-hidden="true"></i> Approve</button>
<button type="button" class="btn btn-warning"><i class="bi bi-pause-fill" aria-hidden="true"></i> Hold</button>
<button type="button" class="btn btn-danger"><i class="bi bi-x-lg" aria-hidden="true"></i> Reject</button>
</div>17Zoom control
A read-only value between minus and plus buttons.
120%
<div class="btn-group" role="group" aria-label="Zoom">
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom out"><i class="bi bi-dash-lg" aria-hidden="true"></i></button>
<span class="btn btn-outline-secondary pointer-events-none text-body" style="min-width: 4.5rem;" aria-live="polite">120%</span>
<button type="button" class="btn btn-outline-secondary" aria-label="Zoom in"><i class="bi bi-plus-lg" aria-hidden="true"></i></button>
</div>18Chart range picker
Small radio group for quick date ranges above a chart.
<div class="btn-group btn-group-sm" role="group" aria-label="Date range">
<input type="radio" class="btn-check" name="range-871" id="range-opt-872" autocomplete="off">
<label class="btn btn-outline-dark" for="range-opt-872">7D</label>
<input type="radio" class="btn-check" name="range-871" id="range-opt-873" autocomplete="off" checked>
<label class="btn btn-outline-dark" for="range-opt-873">30D</label>
<input type="radio" class="btn-check" name="range-871" id="range-opt-874" autocomplete="off">
<label class="btn btn-outline-dark" for="range-opt-874">90D</label>
<input type="radio" class="btn-check" name="range-871" id="range-opt-875" autocomplete="off">
<label class="btn btn-outline-dark" for="range-opt-875">12M</label>
<input type="radio" class="btn-check" name="range-871" id="range-opt-876" autocomplete="off">
<label class="btn btn-outline-dark" for="range-opt-876">All</label>
</div>19Row actions
A small icon group in the last table column for view, edit and delete.
| Customer | Plan | Actions |
|---|---|---|
| Theo Morgan | Team | |
| Finn Novak | Team | |
| Nora Kowalski | Business |
<div class="table-responsive">
<table class="table align-middle mb-0">
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Plan</th>
<th scope="col" class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Theo Morgan</td>
<td>Team</td>
<td class="text-end"><div class="btn-group btn-group-sm" role="group" aria-label="Row actions"><button type="button" class="btn btn-outline-secondary" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-danger" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></div></td>
</tr>
<tr>
<td>Finn Novak</td>
<td>Team</td>
<td class="text-end"><div class="btn-group btn-group-sm" role="group" aria-label="Row actions"><button type="button" class="btn btn-outline-secondary" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-danger" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></div></td>
</tr>
<tr>
<td>Nora Kowalski</td>
<td>Business</td>
<td class="text-end"><div class="btn-group btn-group-sm" role="group" aria-label="Row actions"><button type="button" class="btn btn-outline-secondary" aria-label="View"><i class="bi bi-eye" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-secondary" aria-label="Edit"><i class="bi bi-pencil-fill" aria-hidden="true"></i></button><button type="button" class="btn btn-outline-danger" aria-label="Delete"><i class="bi bi-trash-fill" aria-hidden="true"></i></button></div></td>
</tr>
</tbody>
</table>
</div>20Full-width group
Stretch a group across its container with d-flex and flex-fill buttons.
<div class="btn-group flex" role="group" aria-label="Steps">
<button type="button" class="btn btn-primary flex-auto">1. Details</button>
<button type="button" class="btn btn-outline-primary flex-auto">2. Payment</button>
<button type="button" class="btn btn-outline-primary flex-auto">3. Review</button>
</div>