Bootstrap Button Groups

Bootstrap is giving feature to make a group of multiple buttons which can be stacked together in a single line. This is very useful feature when you have required placing buttons together. You can also add optional JavaScript checkboxes and radio buttons style behavior with Bootstrap Button Plugin.

Below we are summarizing the Bootstrap provided the important classes to use button groups.

.btn-group

This class .btn-group used for basic button group. Wrap the series of button using .btn class in .btn-group.

.btn-toolbar

This class helps to combine sets of buttons (<div class="btn-group">) into a toolbar (<div class="btn-toolbar">) style for more complex components.

.btn-group-lg, .btn-group-sm, .btn-group-xs

These classes can be functional to button group instead of resizing every button.

.btn-group-vertical

This class use for change appearance vertically stacked rather than horizontally a set of buttons.

Basic Button Group

Following examples demonstrates the use of class .btn-group discussed in the above:

Button Toolbar

This examples shows the use of class .btn-toolbar discussed in the above:

Button Size

This examples shows the use of class .btn-group-* discussed in the above table:

Nesting

Place a button groups within another button group i.e, place a .btn-group within another .btn-group. This is ready when you want dropdown menus mixed with a series of buttons.

Vertical Buttongroup

This examples shows the use of class .btn-group-vertical discussed in the above:

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *