ButtonToolbar

Bootstrap 5 ButtonToolbar enables you to combine several button groups to create more advanced button components.

For more complicated components, combine sets of button groups into button toolbars. To space out groups, buttons, and other elements, use utility classes as needed.

Default ButtonToolbar

To use the Contrast Bootstrap 5 ButtonToolbar in your project, use the btn-toolbar class.

HTML

html

<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-primary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-success">3</button>
  </div>
  <div class="btn-group me-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-success">6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-danger">7</button>
    <button type="button" class="btn btn-dark">8</button>
    <button type="button" class="btn btn-warning">9</button>
  </div>
</div>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ButtonGroup

Box