Bootstrap 5 Button Group
Button group
Bootstrap button group allows to group a series of buttons and power them with JavaScript.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
On this page
Basic example
Wrap a series of buttons with.btn in.btn-group. Add on optional JavaScript radio and checkbox style behavior withour buttons plugin.
html
<divclass="btn-group"role="group"aria-label="Basic example"><buttontype="button"class="btn btn-primary">Left</button><buttontype="button"class="btn btn-primary">Middle</button><buttontype="button"class="btn btn-primary">Right</button></div>Ensure the correctrole and provide a label
For assistive technologies (ex. screen readers) to communicate that a series of buttons are grouped, a properrole attribute has to be provided. For button groups, this should berole="group", while toolbars should have arole="toolbar".
Besides, groups and toolbars should be provided an understandable label, as most assistive technologies will otherwise not declare them, despite the appearance of the specific role attribute. In the following examples provided here, we applyaria-label, but options such asaria-labelledby can also be used.
These classes can also be added to groups of links, as an alternative to the.nav navigation components.
html
<divclass="btn-group"><ahref="#"class="btn btn-primary active"aria-current="page">Active link</a><ahref="#"class="btn btn-primary">Link</a><ahref="#"class="btn btn-primary">Link</a></div>Mixed styles
html
<divclass="btn-group"role="group"aria-label="Basic mixed styles example"><buttontype="button"class="btn btn-danger">Left</button><buttontype="button"class="btn btn-warning">Middle</button><buttontype="button"class="btn btn-success">Right</button></div>Outlined styles
html
<divclass="btn-group"role="group"aria-label="Basic outlined example"><buttontype="button"class="btn btn-outline-primary">Left</button><buttontype="button"class="btn btn-outline-primary">Middle</button><buttontype="button"class="btn btn-outline-primary">Right</button></div>Checkbox and radio button groups
Combine button-like checkbox and radiotoggle buttons into a seamless looking button group.
html
<divclass="btn-group"role="group"aria-label="Basic checkbox toggle button group"><inputtype="checkbox"class="btn-check"id="btncheck1"autocomplete="off"><labelclass="btn btn-outline-primary"for="btncheck1">Checkbox 1</label><inputtype="checkbox"class="btn-check"id="btncheck2"autocomplete="off"><labelclass="btn btn-outline-primary"for="btncheck2">Checkbox 2</label><inputtype="checkbox"class="btn-check"id="btncheck3"autocomplete="off"><labelclass="btn btn-outline-primary"for="btncheck3">Checkbox 3</label></div>html
<divclass="btn-group"role="group"aria-label="Basic radio toggle button group"><inputtype="radio"class="btn-check"name="btnradio"id="btnradio1"autocomplete="off"checked><labelclass="btn btn-outline-primary"for="btnradio1">Radio 1</label><inputtype="radio"class="btn-check"name="btnradio"id="btnradio2"autocomplete="off"><labelclass="btn btn-outline-primary"for="btnradio2">Radio 2</label><inputtype="radio"class="btn-check"name="btnradio"id="btnradio3"autocomplete="off"><labelclass="btn btn-outline-primary"for="btnradio3">Radio 3</label></div>Button toolbar
Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
html
<divclass="btn-toolbar"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group me-2"role="group"aria-label="First group"><buttontype="button"class="btn btn-primary">1</button><buttontype="button"class="btn btn-primary">2</button><buttontype="button"class="btn btn-primary">3</button><buttontype="button"class="btn btn-primary">4</button></div><divclass="btn-group me-2"role="group"aria-label="Second group"><buttontype="button"class="btn btn-secondary">5</button><buttontype="button"class="btn btn-secondary">6</button><buttontype="button"class="btn btn-secondary">7</button></div><divclass="btn-group"role="group"aria-label="Third group"><buttontype="button"class="btn btn-info">8</button></div></div>Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
@
@
html
<divclass="btn-toolbar mb-3"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group me-2"role="group"aria-label="First group"><buttontype="button"class="btn btn-outline-secondary">1</button><buttontype="button"class="btn btn-outline-secondary">2</button><buttontype="button"class="btn btn-outline-secondary">3</button><buttontype="button"class="btn btn-outline-secondary">4</button></div><divclass="input-group"><divclass="input-group-text"id="btnGroupAddon">@</div><inputtype="text"class="form-control"placeholder="Input group example"aria-label="Input group example"aria-describedby="btnGroupAddon"></div></div><divclass="btn-toolbar justify-content-between"role="toolbar"aria-label="Toolbar with button groups"><divclass="btn-group"role="group"aria-label="First group"><buttontype="button"class="btn btn-outline-secondary">1</button><buttontype="button"class="btn btn-outline-secondary">2</button><buttontype="button"class="btn btn-outline-secondary">3</button><buttontype="button"class="btn btn-outline-secondary">4</button></div><divclass="input-group"><divclass="input-group-text"id="btnGroupAddon2">@</div><inputtype="text"class="form-control"placeholder="Input group example"aria-label="Input group example"aria-describedby="btnGroupAddon2"></div></div>Sizing
Alternatively, of implementing button sizing classes to each button in a group, add.btn-group-* to all.btn-group, including each one when nesting multiple groups.
html
<divclass="btn-group btn-group-lg"role="group"aria-label="Large button group"><buttontype="button"class="btn btn-outline-primary">Left</button><buttontype="button"class="btn btn-outline-primary">Middle</button><buttontype="button"class="btn btn-outline-primary">Right</button></div><br><divclass="btn-group"role="group"aria-label="Default button group"><buttontype="button"class="btn btn-outline-primary">Left</button><buttontype="button"class="btn btn-outline-primary">Middle</button><buttontype="button"class="btn btn-outline-primary">Right</button></div><br><divclass="btn-group btn-group-sm"role="group"aria-label="Small button group"><buttontype="button"class="btn btn-outline-primary">Left</button><buttontype="button"class="btn btn-outline-primary">Middle</button><buttontype="button"class="btn btn-outline-primary">Right</button></div>Nesting
Put a.btn-group inside another.btn-group when you need dropdown menus combined with a series of buttons.
html
<divclass="btn-group"role="group"aria-label="Button group with nested dropdown"><buttontype="button"class="btn btn-primary">1</button><buttontype="button"class="btn btn-primary">2</button><divclass="btn-group"role="group"><buttontype="button"class="btn btn-primary dropdown-toggle"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Dropdown link</a></li><li><aclass="dropdown-item"href="#">Dropdown link</a></li></ul></div></div>Vertical variation
Create a set of buttons that appear vertically stacked rather than horizontally.Split button dropdowns are not supported here.
html
<divclass="docs-example"><divclass="btn-group-vertical"role="group"aria-label="Vertical button group"><buttontype="button"class="btn btn-primary">Button</button><buttontype="button"class="btn btn-primary">Button</button><buttontype="button"class="btn btn-primary">Button</button><buttontype="button"class="btn btn-primary">Button</button></div></div>html
<divclass="docs-example"><divclass="btn-group-vertical"role="group"aria-label="Vertical button group"><divclass="btn-group"role="group"><buttonid="btnGroupVerticalDrop1"type="button"class="btn btn-primary dropdown-toggle"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</button><ulclass="dropdown-menu"aria-labelledby="btnGroupVerticalDrop1"><li><aclass="dropdown-item"href="#">Dropdown link</a></li><li><aclass="dropdown-item"href="#">Dropdown link</a></li></ul></div><buttontype="button"class="btn btn-primary">Button</button><buttontype="button"class="btn btn-primary">Button</button><divclass="btn-group dropstart"role="group"><buttonid="btnGroupVerticalDrop2"type="button"class="btn btn-primary dropdown-toggle"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</button><ulclass="dropdown-menu"aria-labelledby="btnGroupVerticalDrop2"><li><aclass="dropdown-item"href="#">Dropdown link</a></li><li><aclass="dropdown-item"href="#">Dropdown link</a></li></ul></div><divclass="btn-group dropend"role="group"><buttonid="btnGroupVerticalDrop3"type="button"class="btn btn-primary dropdown-toggle"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</button><ulclass="dropdown-menu"aria-labelledby="btnGroupVerticalDrop3"><li><aclass="dropdown-item"href="#">Dropdown link</a></li><li><aclass="dropdown-item"href="#">Dropdown link</a></li></ul></div><divclass="btn-group dropup"role="group"><buttonid="btnGroupVerticalDrop4"type="button"class="btn btn-primary dropdown-toggle"data-coreui-toggle="dropdown"aria-expanded="false"> Dropdown</button><ulclass="dropdown-menu"aria-labelledby="btnGroupVerticalDrop4"><li><aclass="dropdown-item"href="#">Dropdown link</a></li><li><aclass="dropdown-item"href="#">Dropdown link</a></li></ul></div></div></div><divclass="docs-example"><divclass="btn-group-vertical"role="group"aria-label="Vertical radio toggle button group"><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio1"autocomplete="off"checked><labelclass="btn btn-outline-danger"for="vbtn-radio1">Radio 1</label><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio2"autocomplete="off"><labelclass="btn btn-outline-danger"for="vbtn-radio2">Radio 2</label><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio3"autocomplete="off"><labelclass="btn btn-outline-danger"for="vbtn-radio3">Radio 3</label></div></div>html
<divclass="btn-group-vertical"role="group"aria-label="Vertical radio toggle button group"><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio1"autocomplete="off"checked><labelclass="btn btn-outline-danger"for="vbtn-radio1">Radio 1</label><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio2"autocomplete="off"><labelclass="btn btn-outline-danger"for="vbtn-radio2">Radio 2</label><inputtype="radio"class="btn-check"name="vbtn-radio"id="vbtn-radio3"autocomplete="off"><labelclass="btn btn-outline-danger"for="vbtn-radio3">Radio 3</label></div>CoreUI vs Bootstrap
While this Button Group component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
What sets CoreUI apart from Bootstrap?
- ✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
- 🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
- 👨💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
- 📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
- 🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
- 🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
- 🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.
👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap