Bootstrap 5 button group
Bootstrap 5 provides one class to create multiple buttons simultaneously. Group a collection of multiple buttons on a single line or in a column. Button group displays in one line but handles different operations on the web page. We can create different contextual button groups, radio button groups, and checkbox button groups vertically or horizontally.
Basic button group
Bootstrap 5 button group creates a different button in one single line group. All buttons have their operation in the form.
Syntax
The following syntax shows to create single group of the multiple buttons.
Example
The following example creates three similar buttons in single row with different values. Here, we can see submit, update and delete buttons in single tab.
Output
The following output image shows one tab for different buttons.
Contextual button group
Bootstrap 5 button group creates different color buttons in one single line group. All buttons have their operation and meaning in the form.
Example
The following example creates three different buttons in single line with different values. Here, we can see submit, update and delete buttons with different color.
Output
The following output image shows one tab for different contextual buttons.
Button group Sizes
Bootstrap 5 button group creates a different size of the button group.
Syntax
The following syntax shows to large size button group.
The following syntax shows to small size button group.
Example
The following example shows three sizes of the button groups using bootstrap 5 classes.
Output
The following output image shows one tab for different buttons.
Vertical button group
Bootstrap 5 button groups create a different button in one single column group. All buttons have a different operation in the form.
Syntax
The following syntax shows to create single group of the multiple buttons.
Example
The following example creates three similar types of the button in single column with different values. Here, bootstrap 5 creates submit, update and delete buttons vertically.
Output
The following output image shows one vertical tab for different buttons.
Outline button group
Bootstrap 5 button group creates a similar bordered button in one single line group. All buttons have their operation in the form.
Syntax
The following syntax shows to create single group of the multiple buttons with border style. Here, we can use the “btn-outline-info” class to display bordered button.
Example
The following example creates three buttons in single row with border. Here, we can see submit, update and delete buttons in single tab.
Output
The following output image shows bordered button group in one row.
Checkbox button group
Bootstrap 5 button groups create multiple checkbox buttons in one single row. The button groups either select a single checkbox or select multiple checkboxes.
Syntax
The following syntax shows to create single group of the checkbox buttons.
Example
The following example creates three similar types of the button in single column with different values. Here, bootstrap 5 creates submit, update and delete buttons vertically.
Output
The following output image shows one button group for multiple checkbox buttons.
Radio button group
Bootstrap 5 button groups create multiple radio buttons in one single row. The button groups select a single radio button at one time.
Syntax
The following syntax shows to create single group of the radio buttons.
Example
The following example shows radio button group with contextual button class and outline button class.
Output
The following output image shows one button group for multiple radio buttons.
Button Toolbar
Bootstrap 5 button group contains multiple buttons in one tool. Bootstrap 5 button toolbar contains multiple button groups in a single row. We can contain multiple different button groups in one button toolbar.
Combine sets of button groups into button toolbars for components with a higher level of complexity. Use utility classes to spread out groups, buttons, and other elements.
Syntax
The following syntax shows to create button toolbar for the multiple button groups.
Example
The following example creates three similar buttons in single button groups with different values. Here, we can place multiple button groups like button, checkboxes, and outline radio buttons in toolbar.
Output
The following output image shows different button groups in a single toolbar.
Conclusion
Bootstrap 5 button group function essential in user interaction form. Button group class helps with complex operations with multiple functionalities.