Bootstrap 5 button groups combine multiple buttons into a single unit. This page covers 4 patterns — basic group, toolbar, vertical and radio/checkbox groups — each ready to use in filters, editors and toolbars.
Quick Setup
Button groups need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.btn-group | Horizontal button group wrapper |
.btn-group-vertical | Vertical button group |
.btn-group-sm | Small size for all buttons in group |
.btn-group-lg | Large size for all buttons in group |
.btn-toolbar | Container for multiple button groups |
.btn-check | Hidden checkbox/radio for toggle buttons |
1. Basic Bootstrap 5 Button Group
Buttons grouped together with no gaps using btn-group wrapper.
2. Bootstrap 5 Button Toolbar
Multiple button groups combined into a toolbar using btn-toolbar.
3. Bootstrap 5 Vertical Button Group
Stack buttons vertically using btn-group-vertical instead of btn-group.
4. Bootstrap 5 Radio and Checkbox Button Groups
Toggle-style radio and checkbox buttons that look like button groups. No custom JavaScript needed.
Frequently Asked Questions
Button groups don't wrap by default. For mobile, use d-flex flex-wrap gap-1 instead of btn-group: <div class='d-flex flex-wrap gap-1'>. Each button stays separate but wraps to new lines. Or use JavaScript to switch to a dropdown on small screens.
Add a dropdown inside btn-group: a button with dropdown-toggle class and data-bs-toggle='dropdown', followed by an ul.dropdown-menu. The dropdown integrates seamlessly into the button group styling.
Use the btn-check input/label pattern. Check the input programmatically: document.getElementById('radio1').checked = true. The label button styling updates automatically via CSS. Listen for changes with: input.addEventListener('change', handler).
Add btn-group-sm or btn-group-lg to the btn-group wrapper: <div class='btn-group btn-group-sm'>. This overrides the size of all buttons inside without needing to add btn-sm to each individual button.
btn-group joins buttons together with no gap — borders merge between adjacent buttons. btn-toolbar is a container for multiple btn-group elements, adding spacing between groups. Use btn-group for a single set of related buttons and btn-toolbar when you have multiple groups.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.