Online

Bootstrap Button Groups

In the previous chapter you've learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through the button group component.

Example :-

Result

Basic Button Group

The following example demonstrates the use of class .btn-group discussed in the above table -

Example :-

Result

Button Toolbar

The following example demonstrates the use of class .btn-toolbar discussed in the above table -

Example

Result

Button Size

The following example demonstrates the use of class .btn-group-* discussed in the above table

Example

Result

Nesting

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

Example

Result

Vertical Buttongroup

The following example demonstrates the use of class .btn-group-vertical discussed in the above table

Example

Result