Bootstrap - Bootstrap button groups

Bootstrap button groups allow you to group multiple buttons together on a single line or stacked vertically, making them look like a single, connected control. They are very useful for toolbars, segmented controls, and action groups.

1. Basic Syntax

To create a button group, wrap multiple buttons inside a container with the .btn-group class.

Example:

<div class="btn-group" role="group" aria-label="Basic Button 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">Right</button>
</div>

Explanation:

• .btn-group → Groups buttons together.

• role="group" → Accessibility role.

• aria-label → Provides a label for screen readers.

2. Types of Button Groups

(a) Horizontal Button Group (Default)

This is the standard layout.

<div class="btn-group" role="group">
  <button class="btn btn-secondary">Left</button>
  <button class="btn btn-secondary">Middle</button>
  <button class="btn btn-secondary">Right</button>
</div>

(b) Vertical Button Group

Use .btn-group-vertical to stack buttons vertically.

<div class="btn-group-vertical" role="group">
  <button class="btn btn-success">Top</button>
  <button class="btn btn-success">Middle</button>
  <button class="btn btn-success">Bottom</button>
</div>

(c) Mixed Styles in One Group

You can combine different button colors within the same group:

<div class="btn-group" role="group">
  <button class="btn btn-primary">Home</button>
  <button class="btn btn-warning">Profile</button>
  <button class="btn btn-danger">Logout</button>
</div>

3. Button Group Sizes

Bootstrap allows large, default, and small button groups:

<div class="btn-group btn-group-lg" role="group">
  <button class="btn btn-primary">Large 1</button>
  <button class="btn btn-primary">Large 2</button>
</div>

<div class="btn-group mt-2" role="group">
  <button class="btn btn-success">Default 1</button>
  <button class="btn btn-success">Default 2</button>
</div>

<div class="btn-group btn-group-sm mt-2" role="group">
  <button class="btn btn-danger">Small 1</button>
  <button class="btn btn-danger">Small 2</button>
</div>

4. Button Groups with Dropdowns

Button groups can include dropdown buttons by using .dropdown-toggle and .dropdown-menu.

<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      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>
      <li><a class="dropdown-item" href="#">Something Else</a></li>
    </ul>
  </div>
</div>

5. Button Toolbars

You can combine multiple button groups into a toolbar using .btn-toolbar.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button class="btn btn-secondary">1</button>
    <button class="btn btn-secondary">2</button>
    <button class="btn btn-secondary">3</button>
  </div>
  
  <div class="btn-group me-2" role="group">
    <button class="btn btn-success">A</button>
    <button class="btn btn-success">B</button>
  </div>
</div>

Explanation:

• .btn-toolbar → Groups multiple .btn-group elements in one row.

• .me-2 → Adds spacing between button groups.

6. Toggle Button Groups

Bootstrap 5 allows toggleable button groups using data-bs-toggle="buttons".

<div class="btn-group" role="group" data-bs-toggle="buttons">
  <input type="checkbox" class="btn-check" id="btn1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btn1">Option 1</label>

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

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

How it works:

• .btn-check → Hides the checkbox but keeps its functionality.

• .btn + for="id" → Labels act as toggle buttons.

7. Justified Button Groups

Bootstrap 5 removed .btn-group-justified, but you can achieve the same using flex utilities:

<div class="btn-group w-100" role="group">
  <button class="btn btn-outline-secondary flex-fill">Left</button>
  <button class="btn btn-outline-secondary flex-fill">Middle</button>
  <button class="btn btn-outline-secondary flex-fill">Right</button>
</div>

8. Bootstrap 3 vs Bootstrap 4 & 5 Differences

9. Complete Example (Bootstrap 5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Button Groups</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h2>Bootstrap Button Groups Example</h2>

  <!-- Basic Button Group -->
  <div class="btn-group mb-3" role="group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-primary">Middle</button>
    <button class="btn btn-primary">Right</button>
  </div>

  <!-- Vertical Button Group -->
  <div class="btn-group-vertical mb-3" role="group">
    <button class="btn btn-success">Top</button>
    <button class="btn btn-success">Middle</button>
    <button class="btn btn-success">Bottom</button>
  </div>

  <!-- Button Group with Dropdown -->
  <div class="btn-group mb-3" role="group">
    <button class="btn btn-warning">Option 1</button>
    <button class="btn btn-warning">Option 2</button>
    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
      More
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Something Else</a></li>
    </ul>
  </div>

  <!-- Toolbar Example -->
  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group me-2" role="group">
      <button class="btn btn-secondary">1</button>
      <button class="btn btn-secondary">2</button>
      <button class="btn btn-secondary">3</button>
    </div>
    <div class="btn-group" role="group">
      <button class="btn btn-dark">A</button>
      <button class="btn btn-dark">B</button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>