Toolbars and Button Groups in Bootstrap

What are Toolbars and Button Groups?

Toolbars and button groups in Bootstrap allow developers to group related controls together, making it easier for users to interact with multiple options at once. They enhance the user interface by providing organized and responsive layouts for buttons and other controls.

Button Groups

Button groups are used to group a series of buttons together. This is useful for a set of actions that are related to each other.

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

Expected Output

Vertical Button Group

Button groups can also be oriented vertically by using the .btn-group-vertical class.

Example: Vertical Button Group

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

Expected Output

Toolbars

A toolbar is a flexible container that can hold button groups, input fields, and other controls, providing an area for user actions.

Example: Basic 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-success">Action 1</button>
        <button type="button" class="btn btn-success">Action 2</button>
      </div>
      <div class="btn-group me-2" role="group">
        <button type="button" class="btn btn-danger">Delete</button>
      </div>
      <button type="button" class="btn btn-info">More options</button>
    </div>
                

Expected Output

Summary

Button groups and toolbars are essential components in Bootstrap that allow you to organize user actions in a clear and cohesive manner. They enhance the usability of your web application by grouping related actions together, improving the overall user experience.