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.
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.
Place all the buttons inside the button group container and assign .btn-group-vertical
class to the button group container base class.
Note: To create a vertical group, assign .btn-group-vertical
to the button group container base class.
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.
Note:Button groups can also be created using hyperlinks. Let us see it in the above example.
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.
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.
To control the size of every button in button group, add .btn-group-*
to the container(<div>
) having .btn-group.
Note:To create small & large button group ,assign .btn-group-lg & .btn-group-sm to the button group container respectively.
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.
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.
Note: To create a button group toolbar, assign all the button groups inside the container and assign the .btn-toolbar
class.