Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add button groups with Bootstrap 5.

Button Group

Button groups let us group a series of buttons together on a single line.

To add one, we can write:

<div class="btn-group">
  <button type="button" class="btn btn-secondary">left</button>
  <button type="button" class="btn btn-secondary">center</button>
  <button type="button" class="btn btn-secondary">right</button>
</div>

We have the .btn-group class to create the button group.

Also, we can use the .active class to highlight a button.

For example, we can write:

<div class="btn-group">
  <button type="button" class="btn btn-secondary active">left</button>
  <button type="button" class="btn btn-secondary">center</button>
  <button type="button" class="btn btn-secondary">right</button>
</div>

This also works with links:

<div class="btn-group">
  <a href="#" class="btn btn-secondary active">left</a>
  <a href="#" class="btn btn-secondary">center</a>
  <a href="#" class="btn btn-secondary">right</a>
</div>

The active class works with both buttons and links.

Outlined Styles

The button group can have outlined styles instead of background color.

For example, we can write:

<div class="btn-group">
  <a href="#" class="btn btn-outline-secondary">left</a>
  <a href="#" class="btn btn-outline-secondary">center</a>
  <a href="#" class="btn btn-outline-secondary">right</a>
</div>

We have the btn-outline-secondary class on each button to make the buttons outlined.

#technology #web-development #software-development #programming #javascript #bootstrap 5