Bootstrap 5 Button group Vertical variation

Last Updated : 06 Nov, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Button group Vertical variation</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
        "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity= 
        "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Button group Vertical variation</h2> 
  
        <div class="btn-group-vertical" role="group" 
            aria-label="Basic outlined example"> 
            <button type="button" class="btn btn-primary"> 
                HTML 
            </button> 
            <button type="button" class="btn btn-primary"> 
                CSS 
            </button> 
            <button type="button" class="btn btn-primary"> 
                JavaScript 
            </button> 
            <button type="button" class="btn btn-primary"> 
                jQuery 
            </button> 
            <button type="button" class="btn btn-primary"> 
                Node.js 
            </button> 
            <button type="button" class="btn btn-primary"> 
                React.js 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Button group Vertical variation</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Button group Vertical variation</h2> 
  
        <div class="btn-group-vertical" role="group" 
            aria-label="Basic outlined example"> 
            <button type="button" class="btn btn-primary"> 
                GeeksforGeeks 
            </button> 
            <div class="btn-group" role="group"> 
                <button id="btn1" type="button" 
                    class="btn btn-primary dropdown-toggle" 
                    data-bs-toggle="dropdown"
                    aria-expanded="false"> 
                    Web Technology 
                </button> 
                <ul class="dropdown-menu" 
                    aria-labelledby="btn1"> 
                    <li><a class="dropdown-item" 
                        href="#">HTML</a></li> 
                    <li><a class="dropdown-item" 
                        href="#">CSS</a></li> 
                    <li><a class="dropdown-item" 
                        href="#">JavaScript</a></li> 
                    <li><a class="dropdown-item" 
                        href="#">Bootstrap</a></li> 
                </ul> 
            </div> 
  
            <button type="button" class="btn btn-primary"> 
                Programming 
            </button> 
            <button type="button" class="btn btn-primary"> 
                Data Structure 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 Button group Vertical variation</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <div class="container mt-3"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h2>Bootstrap 5 Button group Vertical variation</h2> 
  
        <div class="bd-example"> 
            <div class="btn-group-vertical" role="group" 
                aria-label="Vertical radio toggle button group"> 
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn1"
                    autocomplete="off" checked=""> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn1"> 
                    HTML 
                </label> 
  
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn2"
                    autocomplete="off"> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn2"> 
                    CSS 
                </label> 
  
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn3"
                    autocomplete="off"> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn3"> 
                    JavaScript 
                </label> 
  
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn4"
                    autocomplete="off"> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn4"> 
                    jQuery 
                </label> 
  
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn5"
                    autocomplete="off"> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn5"> 
                    Node.js 
                </label> 
                  
                <input type="radio" class="btn-check" 
                    name="vertical-radio-btn" 
                    id="vertical-radio-btn6"
                    autocomplete="off"> 
                <label class="btn btn-outline-primary" 
                    for="vertical-radio-btn6"> 
                    React.js 
                </label> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

Suggest improvement

Bootstrap 5 Button group Vertical variation

Bootstrap 5 Close button Disabled state

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Button group Vertical variation

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?