Button Groups in Bootstrap 5
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:
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.
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:
And here's an example of a toggleable button group:
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.