Bootstrap 5 Button Group

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.

Steps to create bootstrap 5 button group:

  • Assign .btn-group to create horizontal button group and .btn-group-vertical to vertical button group to the parent container(i.e <div>) base class.
  • Assign .btn along with contextual .btn-* to the <button> base class.

Example

General Syntax

Try it now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

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 now

Source Code

Try it now

Source Code : Output

Large Button Group

Small Button Group

Link Button

Code 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 now

Source Code

Try it now

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

Try it now

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.

Online Test / Quiz