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.

Note
Accessibility.

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.

Sizing

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

Nesting

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">
  ...
</div>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents