Documentation

Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example

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

<buttongroup buttongrpClass="btn-group" ariaLabel="Basic example">
                <buttons type="button" buttonClass="btn btn-primary">Left</buttons>
                <buttons type="button" buttonClass="btn btn-primary">Middle</buttons>
                <buttons type="button" buttonClass="btn btn-primary">Right</buttons>
            </buttongroup>

These classes can also be added to groups of links, as an alternative to the .nav navigation components.

Active linkLinkLink
<buttongroup buttongrpClass="btn-group">
        <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
        <a href="#" class="btn btn-primary">Link</a>
        <a href="#" class="btn btn-primary">Link</a>
    </buttongroup>

Mixed styles

<buttongroup buttongrpClass="btn-group" ariaLabel="Basic mixed styles example">
        <buttons type="button" buttonClass="btn btn-danger">Left</buttons>
        <buttons type="button" buttonClass="btn btn-warning">Middle</buttons>
        <buttons type="button" buttonClass="btn btn-success">Right</buttons>
    </buttongroup>

Outlined styles

<buttongroup buttongrpClass="btn-group" ariaLabel="Basic outlined example">
    <buttons  buttonClass="btn-outline-primary">Left</buttons>
    <buttons  buttonClass="btn-outline-primary">Middle</buttons>
    <buttons buttonClass="btn-outline-primary">Right</buttons>
</buttongroup>

Checkbox and radio button groups

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

<buttongroup buttongrpClass="btn-group" ariaLabel="Basic checkbox toggle button group">
    <groupcontent type="checkbox" grpClass="btn-check" id="btncheck1" autoComplete="off" Class="btn btn-outline-primary" For="btncheck1">
        Checkbox 1
    </groupcontent>
    <groupcontent type="checkbox" grpClass="btn-check" id="btncheck2" autoComplete="off" Class="btn btn-outline-primary" For="btncheck2">
        Checkbox 2
    </groupcontent>
    <groupcontent type="checkbox" grpClass="btn-check" id="btncheck3" autoComplete="off" Class="btn btn-outline-primary" For="btncheck3">
        Checkbox 3
    </groupcontent>
</buttongroup>
<buttongroup buttongrpClass="btn-group" ariaLabel="Basic radio toggle button group">
    <groupcontent type="radio" grpClass="btn-check" id="btncheck1" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio1">
        Radio 1
    </groupcontent>
    <groupcontent type="radio" grpClass="btn-check" id="btncheck2" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio2">
        Radio 2
    </groupcontent>
    <groupcontent type="radio" grpClass="btn-check" id="btncheck3" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio3">
        Radio 3
    </groupcontent>
</buttongroup>

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.

<buttongroup buttongrpClass="btn-group me-2" ariaLabel="First group">
        <buttons type="button" buttonClass="btn btn-primary">1</buttons>
        <buttons type="button" buttonClass="btn btn-primary">2</buttons>
        <buttons type="button" buttonClass="btn btn-primary">3</buttons>
        <buttons type="button" buttonClass="btn btn-primary">4</buttons>
    </buttongroup>
    <buttongroup buttongrpClass="btn-group me-2" ariaLabel="Second group">
        <buttons type="button" buttonClass="btn btn-secondary">5</buttons>
        <buttons type="button" buttonClass="btn btn-secondary">6</buttons>
        <buttons type="button" buttonClass="btn btn-secondary">7</buttons>
    </buttongroup>
    <buttongroup buttongrpClass="btn-group" ariaLabel="Third group">
        <buttons type="button" buttonClass="btn btn-info">8</buttons>
    </buttongroup>

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.

<div class="btn-toolbar " role="toolbar" aria-label="Toolbar with button groups">
        <buttongroup buttongrpClass="btn-group me-2" ariaLabel="First group">
            <buttons type="button" buttonClass="btn btn-outline-secondary">1</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">2</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">3</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">4</buttons>
        </buttongroup>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
        </div>
    </div>
    <div class="btn-toolbar justify-content-between mt-2" role="toolbar" aria-label="Toolbar with button groups">
        <buttongroup buttongrpClass="btn-group me-2" role="group" ariaLabel="First group">
            <buttons type="button" buttonClass="btn btn-outline-secondary">1</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">2</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">3</buttons>
            <buttons type="button" buttonClass="btn btn-outline-secondary">4</buttons>
        </buttongroup>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon2">@</div>
            <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
        </div>
    </div>

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.





<buttongroup buttongrpClass="btn-group btn-group-lg" ariaLabel="">
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Left</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Middle</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Right</buttons>
    </buttongroup>
    <br><br>
    <buttongroup buttongrpClass="btn-group" ariaLabel="">
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Left</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Middle</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Right</buttons>
    </buttongroup>
    <br><br>
    <buttongroup buttongrpClass="btn-group btn-group-sm" ariaLabel="">
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Left</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Middle</buttons>
        <buttons type="button"  buttonClass="btn btn-outline-secondary">Right</buttons>
    </buttongroup>

Nesting

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

<buttongroup buttongrpClass="btn-group" ariaLabel="Button group with nested dropdown">
        <buttons type="button"  buttonClass="btn btn-primary">1</buttons>
        <buttons type="button"  buttonClass="btn btn-primary">2</buttons>
        <buttongroup buttongrpClass="btn-group">
            <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            </ul>
        </buttongroup>
    </buttongroup>

Vertical variation

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

 <div class="btn-group-vertical">
        <buttongroup buttongrpClass="btn-group" ariaLabel="Basic radio toggle button group">
            <groupcontent type="radio" grpClass="btn-check" id="btncheck1" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio1">
                Radio 1
            </groupcontent>
            <groupcontent type="radio" grpClass="btn-check" id="btncheck2" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio2">
                Radio 2
            </groupcontent>
            <groupcontent type="radio" grpClass="btn-check" id="btncheck3" name="btnradio" autoComplete="off" Class="btn btn-outline-primary" For="btnradio3">
                Radio 3
            </groupcontent>
        </buttongroup>
    </div>