How to Group Buttons in Bootstrap 5 | Explained

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

The code snippet will generate four buttons grouped together, each button having a definite padding, light blue background and white text color.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-50.png" data-lazy- height="86" src="data:image/svg xml,” width=”928″>

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

Here four buttons that are grouped together will be generated, moreover, these buttons will have a vertical direction.

Output

<img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image3-45.png" height="222" src="data:image/svg xml,” width=”152″>

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

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image2-45.png" data-lazy- height="88" src="data:image/svg xml,” width=”1373″>

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

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image4-43.png" data-lazy- height="88" src="data:image/svg xml,” width=”1005″>

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.