Buttons are a crucial part of a website if you want your user to perform a certain task such as submit, delete, or cancel. However, if you wish to group buttons together to display a set of linked actions then this can be done easily using Bootstrap 5. How to group buttons using Bootstrap 5 along with how to style and align button groups have been summed up in this blog.
How to create button groups
For the purpose of grouping buttons, or aligning grouped buttons horizontally, you have to assign a .btn-group class to the div container wrapping the buttons.
HTML
<button type="button" class="btn btn-info text-white">Button 1</button>
<button type="button" class="btn btn-info text-white">Button 2</button>
<button type="button" class="btn btn-info text-white">Button 3</button>
<button type="button" class="btn btn-info text-white">Button 4</button>
</div>
The code snippet will generate four buttons grouped together, each button having a definite padding, light blue background and white text color.
Output
The .btn-group class is used to group buttons, whereas, it also by default aligns these button groups horizontally.
How to align grouped buttons vertically
If you desire to group buttons while aligning them in a vertical direction then Bootstrap 5 provides the class .btn-group-vertical that will fulfill this task right away.
HTML
<button type="button" class="btn btn-info text-white">Button 1</button>
<button type="button" class="btn btn-info text-white">Button 2</button>
<button type="button" class="btn btn-info text-white">Button 3</button>
<button type="button" class="btn btn-info text-white">Button 4</button>
</div>
Here four buttons that are grouped together will be generated, moreover, these buttons will have a vertical direction.
Output
The button group was successfully aligned vertically.
How to give a certain size to grouped buttons
In order to scale the size of your button groups up and down you can use the Bootstrap 5 classes associated with button group sizing such as .btn-group-sm, .btn-group-md, .btn-group-lg, .btn-group-xl.
HTML
<button type="button" class="btn btn-info text-white">Button 1</button>
<button type="button" class="btn btn-info text-white">Button 2</button>
<button type="button" class="btn btn-info text-white">Button 3</button>
<button type="button" class="btn btn-info text-white">Button 4</button>
</div>
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-info text-white">Button 4</button>
<button type="button" class="btn btn-info text-white">Button 5</button>
<button type="button" class="btn btn-info text-white">Button 6</button>
<button type="button" class="btn btn-info text-white">Button 7</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-info text-white">Button 8</button>
<button type="button" class="btn btn-info text-white">Button 9</button>
<button type="button" class="btn btn-info text-white">Button 10</button>
<button type="button" class="btn btn-info text-white">Button 11</button>
</div>
The code will create three horizontally aligned button groups. The first button group will have a large size, the second one medium, and the last one small.
Output
You can adjust the size of button groups depending upon how you have aligned your other content on the website.
How to align multiple button groups inline
No matter how many button groups you place inside the container all of these will be automatically aligned in a horizontal direction. Below we have demonstrated this default behavior of button groups with the help of an example.
HTML
<button type="button" class="btn btn-info text-white">Button 1</button>
<button type="button" class="btn btn-info text-white">Button 2</button>
<button type="button" class="btn btn-info text-white">Button 3</button>
<button type="button" class="btn btn-info text-white">Button 4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info text-white">Button 5</button>
<button type="button" class="btn btn-info text-white">Button 6</button>
<button type="button" class="btn btn-info text-white">Button 7</button>
<button type="button" class="btn btn-info text-white">Button 8</button>
</div>
Applying the code above you will be able to generate two button groups that will be by default aligned inline. You can align more button groups inline if you desire.
Output
This is how you align multiple button groups inline.
Conclusion
For the purpose of grouping buttons using Bootstrap 5 use the .btn-group class. This class, along with generating button groups, will also align them horizontally. Meanwhile, in order to align these groups vertically use the .btn-group-vertical class. Furthermore, if you desire to give a particular size to your button groups then you can use various classes such as .btn-sm, .btn-md, .btn-lg, etc. Utilizing these classes you can easily create and style your button groups.
