Button Groups and Dropdowns in Bootstrap

In Bootstrap, button groups and dropdowns allow for organizing related actions or options in a compact and visually appealing way. Button groups combine multiple buttons into one cohesive unit, while dropdowns provide an easy way to create menus for actions within buttons.

Button Groups

A button group in Bootstrap is a collection of buttons that are aligned together in a single line or stacked vertically. Button groups are useful for grouping related actions into one compact element.

1. Basic Button Group

The basic button group is created using the .btn-group class. It aligns multiple buttons in a single row.

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

• .btn-group: This class groups the buttons together.
• role="group": Improves accessibility by indicating that the buttons are part of a group.

2. Vertical Button Group

A vertical button group is created by adding the .btn-group-vertical class, stacking the buttons vertically instead of horizontally.

<div class="btn-group-vertical" role="group" aria-label="Vertical button 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>

• .btn-group-vertical: This class stacks the buttons vertically in a column.

3. Button Group Sizing

You can change the size of a button group by adding size-specific classes such as .btn-group-lg for large buttons and .btn-group-sm for small buttons.

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

• .btn-group-lg: Creates a large button group.
• .btn-group-sm: Creates a small button group.

4. Button Toolbar

A button toolbar groups button groups together, allowing for more complex layouts. It is wrapped in the .btn-toolbar class.

<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-info">1</button>
    <button type="button" class="btn btn-info">2</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-danger">3</button>
    <button type="button" class="btn btn-danger">4</button>
  </div>
</div>

• .btn-toolbar: This class wraps multiple button groups to create a toolbar-like layout.
• .me-2: Adds spacing between button groups for better spacing.

Button Dropdowns

Button dropdowns provide a toggleable menu of additional actions or options within a button.

1. Basic Button Dropdown

To create a dropdown button, use .dropdown-toggle along with .dropdown-menu inside a .btn-group.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Button
  </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>

• .dropdown-toggle: Makes the button a dropdown toggle.
• .dropdown-menu: Contains the list of dropdown options.

2. Split Button Dropdown

A split button dropdown separates the main action button from the dropdown toggle.

<div class="btn-group">
  <button type="button" class="btn btn-success">Action</button>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </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>

• .dropdown-toggle-split: Separates the main button from the dropdown toggle.
• .visually-hidden: Hides the text for screen readers to make it more accessible.

3. Dropup, Dropright, Dropleft

Bootstrap allows for different dropdown positions such as above, right, or left. You can modify the direction of the dropdown using classes like .dropup, .dropend (right), and .dropstart (left).

<div class="btn-group dropup">
  <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </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>

• .dropup: Displays the dropdown menu above the button.
• .dropend: Displays the dropdown menu to the right.
• .dropstart: Displays the dropdown menu to the left.

4. Sizing for Dropdown Buttons

Button dropdowns can be resized using .btn-lg and .btn-sm, similar to regular buttons.

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

Summary of Button Groups and Dropdowns in Bootstrap

• Button Groups:
  • Use .btn-group to group multiple buttons in a horizontal line.
  • Use .btn-group-vertical to stack buttons vertically.
  • Button sizes can be controlled using .btn-group-lg or .btn-group-sm.
  • Combine multiple button groups using .btn-toolbar.
• Button Dropdowns:
  • Use .dropdown-toggle to create a button that opens a dropdown menu.
  • Split buttons can be created using .dropdown-toggle-split.
  • Use .dropup, .dropend, or .dropstart for different dropdown menu positions.
  • Dropdown buttons can also be resized using .btn-lg or .btn-sm.