---
title: Button group
description: Group a series of buttons together on a single line or stack them in a vertical column.
toc: true
---

## Basic example

Wrap a series of buttons with `.btn` in `.btn-group`.

<Example code={`
    Left
    Middle
    Right
  
`} />

<Callout>
Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
</Callout>

These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/navs-tabs]]).

<Example code={`
    Active link
    Link
    Link
  
`} />

## Mixed styles

<Example code={`
    Left
    Middle
    Right
  
`} />

## Outlined styles

<Example code={`
    Left
    Middle
    Right
  
`} />

## Checkbox and radio button groups

Combine button-like checkbox and radio [toggle buttons]([[docsref:/forms/checks-radios]]) into a seamless looking button group.

<Example code={`
    
    Checkbox 1

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
  
`} />

<Example code={`
    
    Radio 1

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
  
`} />

## 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.

<Example code={`
    
      1
      2
      3
      4

      5
      6
      7

      8

`} />

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.

<Example code={`
    
      1
      2
      3
      4

@

      1
      2
      3
      4

@

`} />

## Sizing

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.

<Example code={`
    Left
    Middle
    Right

    Left
    Middle
    Right

    Left
    Middle
    Right
  
`} />

## Nesting

Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.

<Example code={`
    1
    2

    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      </ul>
    </div>
  
`} />

## Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**

<Example code={`
    Button
    Button
    Button
    Button
  
`} />

<Example code={`

        Dropdown

- Dropdown link
        
- Dropdown link

    Button
    Button

        Dropdown

- Dropdown link
        
- Dropdown link

        Dropdown

- Dropdown link
        
- Dropdown link

        Dropdown

- Dropdown link
        
- Dropdown link

`} />

<Example code={`
    
    Radio 1
    
    Radio 2
    
    Radio 3
  
`} />
