Bootstrap Button Groups

Buttons are an integral part of any user interface, but sometimes a single button isn’t enough. For cases where you need a group of related actions, Bootstrap Button Groups provide an organized, professional solution.

In this guide from TheCodingCollege.com, we’ll explore how to use, customize, and enhance Bootstrap Button Groups to make your UI cleaner and more functional.

What Are Bootstrap Button Groups?

Button Groups in Bootstrap allow you to group multiple buttons together, aligning them horizontally or vertically. These groups are perfect for:

  • Toolbars with multiple actions.
  • Pagination-like designs.
  • Multi-option settings or filters.
  • Mobile-friendly UI elements.

Getting Started with Bootstrap Button Groups

Button groups are created using the <div> container with the btn-group class. Place buttons inside this container to group them.

Basic Example – Horizontal Button Group

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Output:

A horizontal row of buttons aligned side by side.

Vertical Button Groups

To create a vertical button group, use the btn-group-vertical class.

Example – Vertical Button Group

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-secondary">Top</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Bottom</button>
</div>

Use Case:

Vertical button groups are great for navigation menus or mobile-friendly designs.

Bootstrap Button Group Sizes

Just like standalone buttons, button groups can be resized using the size classes btn-group-lg, btn-group-sm, and btn-group-xs.

Example – Large Button Group

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button type="button" class="btn btn-success">Large Button 1</button>
    <button type="button" class="btn btn-success">Large Button 2</button>
    <button type="button" class="btn btn-success">Large Button 3</button>
</div>

Button Groups with Dropdowns

Bootstrap Button Groups seamlessly integrate with dropdown menus, allowing you to add advanced functionality to your buttons.

Example – Button Group with Dropdown

<div class="btn-group" role="group">
    <button type="button" class="btn btn-info">Option 1</button>
    <button type="button" class="btn btn-info">Option 2</button>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action 1</a></li>
            <li><a class="dropdown-item" href="#">Action 2</a></li>
            <li><a class="dropdown-item" href="#">Action 3</a></li>
        </ul>
    </div>
</div>

Output:

A button group with two buttons and a dropdown menu for additional actions.

Justified Button Groups

If you want your buttons to stretch and fill the width of their parent container, use the btn-group-justified class.

Example – Justified Button Group

<div class="btn-group btn-group-justified" role="group">
    <a href="#" class="btn btn-primary" role="button">Left</a>
    <a href="#" class="btn btn-primary" role="button">Middle</a>
    <a href="#" class="btn btn-primary" role="button">Right</a>
</div>

Toolbar with Button Groups

For toolbars with multiple button groups, use the btn-toolbar class to wrap multiple groups in a single container.

Example – Button Toolbar

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group">
        <button type="button" class="btn btn-dark">1</button>
        <button type="button" class="btn btn-dark">2</button>
        <button type="button" class="btn btn-dark">3</button>
    </div>
    <div class="btn-group me-2" role="group">
        <button type="button" class="btn btn-secondary">A</button>
        <button type="button" class="btn btn-secondary">B</button>
    </div>
</div>

Output:

A multi-group toolbar with organized button groups.

Customizing Bootstrap Button Groups

Button groups can be customized to fit your design needs using CSS.

Example – Adding Margins to Buttons

<style>
    .custom-btn-group .btn {
        margin-right: 5px;
    }
</style>

<div class="btn-group custom-btn-group" role="group">
    <button type="button" class="btn btn-warning">Button 1</button>
    <button type="button" class="btn btn-warning">Button 2</button>
    <button type="button" class="btn btn-warning">Button 3</button>
</div>

Adding Icons to Button Groups

You can include icons to make button groups more visually appealing.

<div class="btn-group" role="group">
    <button type="button" class="btn btn-primary">
        <i class="glyphicon glyphicon-plus"></i> Add
    </button>
    <button type="button" class="btn btn-danger">
        <i class="glyphicon glyphicon-trash"></i> Delete
    </button>
    <button type="button" class="btn btn-success">
        <i class="glyphicon glyphicon-ok"></i> Save
    </button>
</div>

Best Practices for Using Bootstrap Button Groups

  1. Organize Actions Logically: Place related actions in the same group for better user experience.
  2. Keep Button Labels Clear: Use concise and action-oriented text for button labels.
  3. Ensure Accessibility: Add aria-label attributes to button groups for screen readers.
  4. Test Responsiveness: Button groups should display properly across different screen sizes.
  5. Avoid Overcrowding: Keep the number of buttons in each group manageable for a clean design.

Conclusion

Bootstrap Button Groups are an excellent tool for creating organized, responsive, and visually appealing user interfaces. From toolbars to navigation menus, their versatility allows you to implement grouped actions effectively.

Leave a Comment