In Bootstrap 5, the Button Group component is used to group multiple buttons together for a unified appearance and improved user experience. It allows you to create sets of buttons that are visually connected and can be interacted with as a group. Here's an example of how to use button groups in Bootstrap 5:

html
<div class="btn-group" role="group" aria-label="Button Group">
    <button type="button" class="btn btn-primary">Button 1</button>
    <button type="button" class="btn btn-primary">Button 2</button>
    <button type="button" class="btn btn-primary">Button 3</button>
</div>

In the above example, the `<div>` element with the class `btn-group` creates the button group container. Inside the button group, you can place multiple `<button>` elements to create individual buttons. The buttons will appear side by side and be visually connected.
You can customize the appearance and behavior of the button group by using additional classes and attributes:

- `role="group"`: Specifies the role of the container as a group.
- `aria-label`: Provides an accessible label for assistive technologies.

Bootstrap also offers different button group variations, such as vertical button groups and button toolbar, by using additional classes.

**Vertical Button Group:**

html
<div class="btn-group-vertical" role="group" aria-label="Vertical Button Group">
    <button type="button" class="btn btn-primary">Button 1</button>
    <button type="button" class="btn btn-primary">Button 2</button>
    <button type="button" class="btn btn-primary">Button 3</button>
</div>

**Button Toolbar:**

html
<div class="btn-toolbar" role="toolbar" aria-label="Button Toolbar">
    <div class="btn-group me-2" role="group" aria-label="Group 1">
        <button type="button" class="btn btn-primary">Button 1</button>
        <button type="button" class="btn btn-primary">Button 2</button>
        <button type="button" class="btn btn-primary">Button 3</button>
    </div>
    <div class="btn-group" role="group" aria-label="Group 2">
        <button type="button" class="btn btn-primary">Button 4</button>
        <button type="button" class="btn btn-primary">Button 5</button>
    </div>
</div>

Button groups can also be combined with other Bootstrap components like dropdowns or input fields to create more complex and interactive interfaces.

Remember to include the Bootstrap CSS and JavaScript files in your HTML document to ensure that the button groups and other Bootstrap components work properly.

For more details and advanced options, refer to the official Bootstrap documentation on Button Groups: [Bootstrap Button Groups](https://getbootstrap.com/docs/5.0/components/button-group/)

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc