Bootstrap 5Forms

Bootstrap 5 Button Group

Bootstrap 5 Button Groups wrap a series of buttons into a single, visually connected unit by removing the gap and border-radius between adjacent buttons. Use them when users need to choose between related actions or toggle between views — such as switching a calendar between day, week, and month layouts. They're especially effective in toolbars, filter bars, and inline form controls where space is tight and the relationship between options should be visually obvious.

Primary Class

.button-group

Common Use Cases

→A date range picker toolbar with 'Today', 'This Week', 'This Month', and 'Custom' buttons that filter a data table
→A text editor formatting bar grouping Bold, Italic, Underline, and Strikethrough toggle buttons
→A product listing page with 'Grid View' and 'List View' toggle buttons that switch the display layout
→A checkout form with payment method selectors — 'Credit Card', 'PayPal', 'Bank Transfer' — presented as a button group instead of radio buttons

Variants & Classes

Variant	Description	Classes
Button Group Default	Standard button group with Bootstrap's default styling.	`button-group`
Button Group Responsive	Responsive variant that adapts to different screen sizes.	`button-group button-group-responsive`

Code Example

<div class="btn-group" role="group" aria-label="View mode">
  <button type="button" class="btn btn-outline-primary active">Grid View</button>
  <button type="button" class="btn btn-outline-primary">List View</button>
  <button type="button" class="btn btn-outline-primary">Map View</button>
</div>

Live Examples

Basic Button Group

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated button group with custom colours
✓Button Group with interactive states
✓Responsive button group for all screen sizes

Best Practices

Always include role and aria-label

Add role="group" and a descriptive aria-label to every .btn-group wrapper — screen readers won't announce the grouping context without it, which breaks accessibility for keyboard-only users.

Use btn-group-sm or btn-group-lg for sizing

Apply .btn-group-sm or .btn-group-lg to the wrapper element rather than adding size classes to each individual button — this keeps the sizing consistent and reduces markup clutter.

Nest groups inside a .btn-toolbar for complex controls

When you have multiple button groups that belong together — such as a text editor toolbar — wrap them in a <div class="btn-toolbar"> with role="toolbar" to create a proper composite widget with correct spacing between groups.

Avoid mixing filled and outline variants in one group

Mixing .btn-primary with .btn-outline-primary inside the same group creates jarring visual weight differences; pick one style per group so the connected border treatment renders cleanly.

FAQ

How do I make a Button Group behave like radio buttons so only one option stays selected?

Use <input type="radio"> elements hidden inside each button via Bootstrap's built-in pattern: wrap each button as a <label class="btn btn-outline-secondary"> with a corresponding <input type="radio" class="btn-check"> placed immediately before it. Bootstrap's .btn-check class hides the native input while the :checked state drives the active appearance through CSS, giving you real form semantics without JavaScript.

Can I make a vertical Button Group, and how?

Yes — replace .btn-group with .btn-group-vertical on the wrapper element. The buttons stack top-to-bottom with joined borders on the horizontal edges instead of the vertical ones. Note that vertical groups don't support split dropdown buttons, so avoid mixing those patterns.

How does Canvas Builder handle Button Group generation?

When you describe a grouped action control in Canvas Builder — for example, 'a toolbar for switching between chart types' — it generates a semantically complete .btn-group block with your site's brand colours applied via the Canvas HTML template's custom CSS variables. It outputs the correct role and aria-label attributes automatically and sizes the group to fit its container, so the result is accessible and responsive without any manual adjustment.