Bootstrap 5 Button Groups

Welcome back to The Coding College, where coding becomes simple and enjoyable! In this tutorial, we’ll cover Bootstrap 5 Button Groups, a feature that allows you to group multiple buttons together for better UI/UX and more efficient layouts.

Button groups are perfect for actions that are closely related, like formatting tools, grouped navigation, or segmented controls. Let’s explore how to implement and customize button groups in your projects.

What Are Button Groups in Bootstrap 5?

A Button Group in Bootstrap 5 is a container for grouping multiple buttons together in a horizontal or vertical layout. This allows developers to design cohesive and organized interfaces with grouped actions.

Button groups are created using the .btn-group or .btn-group-vertical classes. They are responsive and accessible, adapting to different screen sizes seamlessly.

Basic Button Group Example

To create a button group, wrap a set of buttons in a <div> with the .btn-group class.

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:

Three buttons aligned horizontally, grouped into one cohesive unit.

Vertical Button Groups

For vertical stacking, 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-danger">Button 1</button>
  <button type="button" class="btn btn-warning">Button 2</button>
  <button type="button" class="btn btn-info">Button 3</button>
</div>

Key Features:

  • Buttons are stacked vertically.
  • Ideal for mobile-first designs or dropdown-style layouts.

Button Group Sizing

Adjust the size of button groups using the .btn-group-lg or .btn-group-sm classes.

Example: Different Sizes

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-success">Large Button</button>
  <button type="button" class="btn btn-success">Large Button</button>
</div>

<div class="btn-group btn-group-sm mt-3" role="group">
  <button type="button" class="btn btn-dark">Small Button</button>
  <button type="button" class="btn btn-dark">Small Button</button>
</div>

Button Toolbar

A Button Toolbar is a container for grouping multiple button groups and other input elements together.

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-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
  </div>
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-success">A</button>
    <button type="button" class="btn btn-success">B</button>
    <button type="button" class="btn btn-success">C</button>
  </div>
</div>

Key Features:

  • Aligns multiple button groups in one toolbar.
  • Supports additional spacing using utilities like .me-2.

Checkbox and Radio Button Groups

Button groups can include checkbox or radio button inputs for selection purposes. This is useful for toggles or segmented controls.

Example: Checkbox Button Group

<div class="btn-group" role="group" aria-label="Checkbox button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Example: Radio Button Group

<div class="btn-group" role="group" aria-label="Radio button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-success" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-success" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-success" for="btnradio3">Radio 3</label>
</div>

Justified Button Groups

Use .btn-group combined with .d-flex to create button groups that stretch to fill their container.

Example: Justified Buttons

<div class="btn-group d-flex" role="group" aria-label="Justified button group">
  <button type="button" class="btn btn-primary flex-fill">Left</button>
  <button type="button" class="btn btn-primary flex-fill">Middle</button>
  <button type="button" class="btn btn-primary flex-fill">Right</button>
</div>

Dropdowns in Button Groups

Add dropdown menus to button groups for more dynamic functionality.

Example: Dropdown Button Group

<div class="btn-group" role="group">
  <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 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

Accessibility Best Practices

  1. Use role="group" and aria-label to describe the button group’s purpose.
  2. Ensure keyboard navigation is intuitive by testing with the Tab and Arrow keys.
  3. Always include meaningful button text for screen readers.

Best Use Cases for Button Groups

  1. Text Editors: Format text with options like bold, italic, and underline.
  2. Navigation: Group related links together.
  3. Forms: Provide multiple options for a single input field.
  4. Settings Panels: Offer toggleable configuration options.

FAQs About Bootstrap 5 Button Groups

Q1: Can I mix buttons of different sizes in one group?

A: While technically possible, it’s best to maintain consistency in button sizes for better aesthetics and usability.

Q2: Are button groups responsive?

A: Yes, button groups adapt to different screen sizes and alignments using Bootstrap’s grid and utility classes.

Q3: Can I add icons to button groups?

A: Absolutely! Use Bootstrap Icons or other libraries to add icons inside buttons.

Conclusion

Bootstrap 5 Button Groups are a versatile and user-friendly feature for grouping buttons in a clean and organized way. From toolbars to dropdown menus, these groups enhance functionality and improve the user experience.

Leave a Comment