Bootstrap 5 Button group Vertical variation

The vertical group variation is used to stack the button group vertically rather than horizontally. To make the vertical variation of the button group, we will use .btn-group-vertical class.

Vertical variation Class:

• .btn-group-vertical: This class is used to create a button group vertically.

Syntax:

<div class="btn-group-vertical" role="group" 
 aria-label="Basic outlined example">
 <button type="button" class="btn btn-*"></button>
 ...
</div>

 

Example 1: In this example, we will use the button group vertical class to create the vertical button group.

Output:

👁 Image

Example 2: In this example, we will use the button group vertical class to create the vertical button group with the dropdown menu.

Output:

👁 Image

Example 3: In this example, we will use the button group vertical class to create the vertical button group with the radio select option.

Output:

👁 Image

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