Buttons group
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
Button groupBasic example

Wrap a series of buttons with .btn in .btn-group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

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

Button groupMixed styles
Outlined styles
Button groupCheckbox and radio button groups

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

Button groupButton 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.

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.

Button groupSizing

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.



Button groupNesting

Put a .btn-group inside another .btn-group when you need dropdown menus combined with a series of buttons.

Button groupVertical variation

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