Bootstrap 5 Button Groups: Tips for Using Side-by-Side Buttons Effectively

In web development, it is often necessary to arrange multiple buttons side by side to form a group of functionally related action buttons. Bootstrap 5’s “Button Groups” feature enables this requirement with ease, eliminating the need to manually write complex CSS layout code. This article will explain how to use Bootstrap 5 button groups from basic to advanced, suitable for beginners to get started quickly.

一、什么是Bootstrap5按钮组？¶

A button group wraps multiple buttons in a container and uses unified class names to achieve side-by-side display and style consistency. It solves the problems of inconsistent spacing, alignment, and styles when buttons are arranged separately in traditional HTML. Additionally, it supports flexible extensions such as size adjustment, arrangement direction, and nesting.

二、基础用法：水平按钮组¶

The most common button group is the horizontal arrangement, which can be achieved with just two core class names:

1. Outer container: Use .btn-group to wrap all buttons. This is the basic container for horizontal button groups.
2. Inner buttons: Each button must include the .btn class (for basic button styling) and Bootstrap’s button color classes (e.g., .btn-primary, .btn-secondary).

Example Code:

<!-- Basic horizontal button group -->
<div class="btn-group" role="group" aria-label="Basic action button group">
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-secondary">Cancel</button>
  <button type="button" class="btn btn-success">Submit</button>
</div>

• role="group": An accessibility attribute that tells screen readers this is a group of related buttons.
• aria-label: Provides a descriptive label for the button group to enhance accessibility (optional but recommended).
• Effect: The three buttons will be displayed side by side with no extra spacing between them (Bootstrap removes the default margin between buttons).

三、按钮组的尺寸控制¶

Bootstrap 5 supports uniform size settings for button groups by adding size classes to the outer .btn-group:

• Small size: .btn-group-sm
• Default size: No additional class needed (consistent with the default button size)
• Large size: .btn-group-lg

Example Code:

<!-- Small-sized button group -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small-sized button group">
  <button class="btn btn-primary">Small Button 1</button>
  <button class="btn btn-secondary">Small Button 2</button>
</div>

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

四、垂直按钮组¶

For vertically arranged button groups (e.g., side navigation menus), use .btn-group-vertical instead of .btn-group:

Example Code:

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button class="btn btn-outline-primary">Home</button>
  <button class="btn btn-outline-secondary">List</button>
  <button class="btn btn-outline-success">Details</button>
</div>

• Effect: Buttons are arranged vertically from top to bottom, with each button occupying the full width of the container.

五、按钮组嵌套使用¶

Button groups support nested structures, commonly used for including dropdown menu buttons (e.g., a “More Actions” button) within the group:

Example Code:

<div class="btn-group" role="group" aria-label="Nested button group">
  <button class="btn btn-primary">Left Button</button>
  <button class="btn btn-secondary">Middle Button</button>
  <!-- Dropdown menu button -->
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      More Actions
    </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>
    </ul>
  </div>
</div>

• Key Point: A nested .btn-group forms an independent button group, displayed side by side with the outer button group.

六、按钮组对齐方式¶

To control the alignment of the entire button group within its parent container (e.g., centering, right alignment), combine Bootstrap’s Flex layout classes:

• Left alignment: Default (no additional class needed)
• Center alignment: .d-flex justify-content-center
• Right alignment: .d-flex justify-content-end

Example Code:

<!-- Centered button group -->
<div class="d-flex justify-content-center">
  <div class="btn-group" role="group" aria-label="Centered button group">
    <button class="btn btn-info">Button 1</button>
    <button class="btn btn-light">Button 2</button>
  </div>
</div>

七、注意事项¶

1. Correct structure required: Buttons must be wrapped in .btn-group, and inner buttons must use the .btn class. Non-button elements cannot be directly nested.
2. Accessibility attributes: Always include role="group" and aria-label to help screen readers identify the button group’s function.
3. Avoid over-nesting: Complex scenarios (e.g., multi-level nested dropdowns) may reduce maintainability. Consider simpler components for such cases.

总结¶

Bootstrap 5 button groups simplify the development of button combinations through simple class name combinations, enabling quick side-by-side arrangement, size control, vertical arrangement, and nesting. Mastering the basic usage allows you to handle most common button combination scenarios efficiently.

Key Class Quick Reference:
- .btn-group: Horizontal button group (default)
- .btn-group-vertical: Vertical button group
- .btn-group-sm/.btn-group-lg: Control the overall size of the button group
- .justify-content-*: Alignment of button groups (requires .d-flex)
- Nesting: Use .dropdown components within .btn-group

With these techniques, you can flexibly use Bootstrap 5 button groups to build clear and user-friendly interfaces, making web interactions more intuitive and efficient.