John Doe
Add .btn-circle to use circle buttons.
Add .btn-circle and .btn-outline to use outline circle buttons.
Add .btn-outline to use outline buttons.
Wrap a series of buttons with .btn in .btn-group.
Add the disabled attribute to <button> buttons.
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.
Turn a button into a dropdown toggle with some basic markup changes.
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
With <a> elements
Just wrap a series of .btns in .btn-group.btn-group-justified.
With
<button>
elements
To use justified button groups with
<button>
elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to
<button>
elements, but since we support button dropdowns, we can workaround that.
Button dropdowns work with buttons of all sizes.
Trigger dropdown menus above elements by adding .dropup to the parent.