Bootstrap 5Forms

Bootstrap 5 Button Group

A Bootstrap 5 Button Group wraps a series of buttons into a single horizontal (or vertical) control, removing the gaps between them and optionally giving them a shared border. Use it when you need a set of related actions — like filter options, view toggles, or segmented controls — that belong together visually and functionally. It differs from a toolbar in that a single group represents one logical choice set, not a collection of disparate tools.

Primary Class

.button-group

Common Use Cases

→Toggling between table view, grid view, and list view on a product listing page — each button switches the display mode and the active state highlights the current selection
→A date range selector with preset options (Today, This Week, This Month, Custom) inside a dashboard analytics panel, replacing a dropdown with always-visible choices
→A text editor toolbar segment for inline formatting — Bold, Italic, Underline — where users expect the buttons to be visually joined rather than spaced apart
→A quantity selector in an e-commerce product page combining a decrement button, a readonly input showing the count, and an increment button inside an input group variant of the button group

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 options">
  <input type="radio" class="btn-check" name="viewOptions" id="viewGrid" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="viewGrid">Grid</label>

  <input type="radio" class="btn-check" name="viewOptions" id="viewList" autocomplete="off">
  <label class="btn btn-outline-primary" for="viewList">List</label>

  <input type="radio" class="btn-check" name="viewOptions" id="viewTable" autocomplete="off">
  <label class="btn btn-outline-primary" for="viewTable">Table</label>
</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 add role and aria-label

Screen readers won't understand the grouping unless you add `role="group"` and a descriptive `aria-label` to the wrapper div — Bootstrap doesn't inject these automatically, so leaving them out fails WCAG 2.1.

Use btn-check for true toggle behaviour

Pair `<input type="radio">` or `<input type="checkbox">` with the `btn-check` class and a corresponding `<label class="btn">` — this gives you native form state (checked/unchecked) without any JavaScript, and the active highlight is handled by CSS alone.

Size the whole group, not individual buttons

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

Nest dropdown menus inside a button group cleanly

You can place a `<div class="btn-group">` inside another `btn-group` to embed a dropdown trigger mid-group — this is the correct Bootstrap pattern for a split button, keeping the action button and its dropdown arrow as separate focusable elements.

FAQ

How do I make a button group vertical instead of horizontal?

Replace the `btn-group` class with `btn-group-vertical` on the wrapper div. Everything else — sizing, active states, nested dropdowns — works exactly the same. Note that `btn-group-vertical` does not support split button dropdowns, so avoid nesting those inside a vertical group.

Can I customise the active button colour to match my brand instead of Bootstrap's default primary?

Yes — if you're using `btn-outline-*` variants, switch to any semantic colour class like `btn-outline-success` or `btn-outline-danger`. For fully custom brand colours, define a CSS variable override: set `--bs-btn-active-bg`, `--bs-btn-active-border-color`, and `--bs-btn-active-color` on the `.btn` selector within your button group scope. In Canvas Builder projects, your brand primary colour is automatically mapped to these variables at generation time.

How does Canvas Builder generate a Button Group component?

When you describe a segmented control or toggle set in Canvas Builder, it outputs a fully structured `btn-group` block with the correct `role`, `aria-label`, and either `btn-check` inputs for toggle behaviour or standard `<button>` elements for action groups. It wires in your project's brand colour tokens so the active and hover states match your palette without manual CSS edits.