Bootstrap 5 Button Group
Bootstrap 5 button group component is used to group a series of buttons together on a single line or stack them in a vertical column.
General Syntax
Try it nowSource Code
Source Code : Output
Button Group
Code Explanation
Note: In this example, assign .btn-group to the button group container & assign .btn & .btn-* to the every
<button> base class.
Please keep in mind that button group can also be created with <a> & <input> element.Just apply above mention step to the describe element and create button group.
Vertical Button Group
Place all the buttons inside the button group container and assign .btn-group-vertical class to the button group container base class.
General Syntax
Try it nowSource Code
Source Code : Output
Vertical Button Group
Code Explanation
Note: To create a vertical group, assign .btn-group-vertical to the button group container base class.
Creating Button Group Using Hyperlink
Place all the hyperlink element inside the button group container and assign .btn followed by .btn-* class to the every hyperlink element base class. At the end, assign .btn-group class to the button group container base class.
General Syntax
Try it nowSource Code
Source Code : Output
Creating Button Group Using Hyperlink
Code Explanation
Note:Button groups can also be created using hyperlinks. Let us see it in the above example.
Checkbox Button Group
General Syntax
Try it nowSource Code
Source Code : Output
Checkbox Button group
Code Explanation
Note:To create a checkbox button group, assign all the checkboxes inside the checkbox container having class .btn-group and also assign .btn-check to the checkbox base class and .btn and .btn-outline-* to the label element base class.
Radio Button Group
General Syntax
Try it nowSource Code
Source Code : Output
Radio Outline Button group
Code Explanation
Note:
To create a radio button group, assign all the radio button inside the radio buttons container having class .btn-group and also assign .btn-check to the radio base class and .btn and .btn-outline-* to the label element base class.
Button Group Size
To control the size of every button in button group, add .btn-group-* to the container(<div>) having .btn-group.
General Syntax
Try it nowSource Code
Source Code : Output
Large Button Group
Small Button Group
Link ButtonCode Explanation
Note:To create small & large button group ,assign .btn-group-lg & .btn-group-sm to the button group container respectively.
Outline Button Group
General Syntax
Try it nowSource Code
Source Code : Output
Outline Button Group
Code Explanation
Note:
Place all the buttons inside the container and assign .btn-group to the base class of the container and also assign
.btn & .btn-outline-* to every button base class.
Button toolbar
It combines a set of button groups into a button toolbar. Utility classes play a vital role to provide space between the group.
To make button toolbar,you must have to provide button group container i.e parent container to btn-toolbar class while as every button group parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class.To make a button toolbar, you must have to provide a button group container i.e parent container to the btn-toolbar class while every button groups parent container to btn-group class and every button to btn class followed by one of the btn-primary, btn-secondary,btn-success, btn-danger,btn-warning, btn-info,btn-dark, btn-light, btn-link to the element <a>, <button> or <input> class.
Source Code
Source Code : Output
Button Toolbar
Code Explanation
Note: To create a button group toolbar, assign all the button groups inside the container and assign the .btn-toolbar class.