Button Groups in Bootstrap 5

Button Groups

Bootstrap provides a class called btn-group to group a set of buttons together.

Here's an example of how to use the btn-group class:

Editor

Loading...

In this example:

• We have uses the btn-group class to group the buttons together, and the btn and btn-primary classes to create primary buttons with blue color.
• The role attribute and aria-label attribute are used for accessibility.

Cutomize Button Groups

Bootstrap also provides additional classes to customize the appearance of button groups.

Here are some of the most commonly used classes:

• btn-group-lg, btn-group-sm: These classes are used to change the size of the button group.

• btn-group-vertical: This class is used to align buttons vertically.

• btn-group-toggle: This class is used to create a group of toggleable buttons, such as radio buttons or checkboxes.

• btn-group-justified: This class is used to create a button group that fills the width of its parent container.

Here's an example of a vertical button group:

Editor

Loading...

And here's an example of a toggleable button group:

Editor

Loading...

In this example:

• We use the data-toggle="buttons" attribute to indicate that the buttons should behave like toggleable buttons.
• We also use the active class to make the first button active by default.