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 button group:
-
Assign
.btn-groupto the button group container. -
Assign
.btnand button background contextual classesbtn-*to the every<button>,<a>or<input>element base class.
Button Group Example
General Syntax
Try it nowSource Code
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-toolbarto the button group container. - Assign
.btn-groupto the every button container. - Assign
.btn& contextual classesbtn-*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 nowSource Code
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.
Button Group Sizing
To control the size of button group,follow the given below instructions:
- Large Size: To make large button group,assign
.btn-group-lgto the button container i.e having.btn-group. - Small Size: To make smaller button group,assign
.btn-group-smto the button container i.e having.btn-group.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Button Group Size
Note:
Please keep in mind that button group size can be controlled by
.btn-group-lg & .btn-group-sm.To make larger button group,assign .btn-group-lg to the button container while to make smaller button group ,assign
.btn-group-sm to the button container having .btn-group.
Vertical Button Group
To create vertical button group,you have to apply .btn-group-vertical to parent button container base class.
Example
General Syntax
Try it nowSource Code
Source Code : Output
Vertical Button Group
Note:
Vertical button group can easily created by assigning .btn-group-vertical to the button container.