Bootstrap 5 Button Groups

Bootstrap 5 – A Comprehensive Guide to Modern Web Development

About Lesson

In Bootstrap 5, button groups allow you to group multiple buttons together and apply styling to the group as a whole. Here’s how you can create button groups in Bootstrap 5:

Basic Button Group:

<div class="btn-group" role="group" aria-label="Basic example">
  <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:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">Button 1</button>
    <button type="button" class="btn btn-secondary">Button 2</button>
    <button type="button" class="btn btn-secondary">Button 3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">Button 4</button>
    <button type="button" class="btn btn-secondary">Button 5</button>
  </div>
</div>

Vertical Button Group:

<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>

Nested Button Group:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Button 1</button>
  <button type="button" class="btn btn-primary">Button 2</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another Action</a></li>
    </ul>
  </div>
</div>

These examples demonstrate different ways to create button groups in Bootstrap 5. You can customize the buttons and their styling within the groups to suit your needs. Remember to consult the official Bootstrap documentation for more details and additional options related to button groups in Bootstrap 5.

Join the conversation