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.
Button Toolbar
To group button groups together, we can add button toolbars.
For example, we can write:
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-primary">4</button>
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">7</button>
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
We have the div with the btn-toolbar class to add the button group.
Then we have the button groups inside.
We add mr-2 to add some margins to the right.
Sizing
Button group sizes can be changed.
The btn-group-* classes can let us change the size.
For example, we can write:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
to add a button group with large buttons.
This is done with the btn-group-lg class.
To make a button group with small buttons, we can write:
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
This is done with the btn-group-sm class.
Nesting
Button groups can be nested.
For example, 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>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
</ul>
</div>
</div>
We put a button group inside another button group so that we can add a dropdown to our code.
The dropdown is in one button group.
We have a button for the dropdown toggle and a ul for the menu.
Vertical Variation
We can make button groups vertical with the btn-group-vertical class.
Split button dropdowns aren’t supported with vertical button groups.
To add one, we can write:
<div class="btn-group-vertical">
<button type="button" class="btn btn-secondary">left</button>
<button type="button" class="btn btn-secondary">center</button>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">foo</a></li>
<li><a class="dropdown-item" href="#">bar</a></li>
</ul>
</div>
</div>
We just add the btn-group-vertical class to make it vertical.
Conclusion
Button groups let us add multiple buttons into one container.
We can nest them and add dropdowns to them.
