Aquileo | Bootstrap 5 Button group Nesting

Bootstrap 5 Button group nesting is used to create a dropdown menu mixed with a series of buttons. To make the button group nesting, we will use .btn-group class.

Button group nesting used Class:

.btn-group: This class is used to create a button group nesting in a dropdown menu.

Syntax:

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

Example 1: In this example, we will use .btn-group class to create a button group nesting.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Button group Nesting</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 Nesting</h2>

        <div class="btn-group" role="group" 
            aria-label="Basic group nesting 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 2: In this example, we will use .btn-group-vertical class to create a button group nesting in a vertical way.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap 5 Button group Nesting</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 Nesting</h2>

        <div class="btn-group-vertical" role="group" 
            aria-label="Basic group nesting 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:

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

Bootstrap 5 Button group Nesting

Explore