bootstrap 4:BS Button Group

Bootstrap 4 Button Groups

Bootstrap 4 button groups are used to groups a series of buttons together on a single line or stack them in a vertical column.

Process to create bootstrap 4 button groups:

Assign .btn-group to the button group container.
Assign .btn and button background contextual classes btn-* to the every <button>,<a> or <input> element base class.

Button Group Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Note:In the above example,.btn-group ,.btn followed by one of the background contextual classes (.btn-*) is used to create button group.

Note: Please keep in mind that the button group is a collection of buttons that could be aligned either horizontally or vertically.

Button toolbar

It combines set of button group into button toolbar. Utility classes play vital role to provide space between buttons group.

Follow the following steps to make button toolbar:

To make button toolbar, assign .btn-toolbar to the button group container.
Assign .btn-group to the every button container.
Assign .btn & contextual classes btn-* to the every <button> container.
Followings are the button contextual class:btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-dark, btn-light, btn-link.

Button Toolbar Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Button Toolbar

Note:Please keep in mind that the button toolbar is a collection of button groups.Although button group is a collection of buttons.