Bootstrap 5 Button Group Sizing

Bootstrap 5 provides different classes that allow changing button group sizes. Instead of using button sizing classes to every button element in a group, we can just add .btn-group-* class to set the button size in a button group.

Button Group Sizing Classes:

• .btn-group-lg: This class is used to create large-size button groups.
• .btn-group-sm: This class is used to create small-size button groups.

Syntax:

<div class="btn-group btn-group-lg" 
 role="group" aria-label="...">
 ...
</div>

 

Example 1: In this example, we will use button group sizing classes to create button groups in different sizes.

Output:

👁 Image

Example 2: In this example, we will use button group sizing classes to create button groups in different sizes with font awesome icons.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/button-group/#sizing