Button Group

Group a series of buttons together on a single line with the button group.

Basic example

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


For assistive technologies (such as screen readers) give an appropriate role attribute to convey that a series of buttons is grouped. For button groups, this would be role="group", while toolbars should have a role="toolbar".

For groups and toolbars give an explicit label as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the below examples aria-label is used, but alternatives such as aria-labelledby can also be used.

Button toolbar

Button toolbar are made by combining sets of button groups into button toolbars by wrapping multiple button groups with .btn-toolbar. Use utility classes as needed to space out groups, buttons, and more.

You can add input groups with button groups in your toolbars. Use utilities to space properly.


Add .btn-group-lg(large) and .btn-group-sm(sm) to each .btn-group.


You can place a .btn-group within another .btn-group when you want dropdown menus added with a series of buttons.

Vertical variation

Add .btn-group-vertical to make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported.

<div class="btn-group-vertical">
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +