Learn 'Mobile First' Web Design Using Bootstrap 3 by Rahul A. Sakla - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

Chapter 10 Button Groups

 

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with bootstrap buttons plugin.

 

10.1 Tooltips & popovers in button groups require special setting

img4.pngWhen using tooltips or popovers on elements within a .btn-group, you'll have   to specify the option container: 'body' to avoid unwanted side effects tsuch as the element growing wider andfor losing its rounded corners when the tooltip or popover is triggered).

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

img185.png

 

img186.png

 

10.2 Button Toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

img187.png

img188.png

 

10.3 Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

 

img189.png

 

img190.png

 

10.4 Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

img191.png

img192.png

img193.png

 

10.5 Vertical Variation

Make a set of buttons appear vertically stacked rather than horizontally.

Split button dropdowns are not supported here.

 

img194.png

img195.png