Open In App

Bootstrap 5 Button group Nesting

Improve
Improve
Like Article
Like
Save
Share
Report

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">
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        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">
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        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



Last Updated : 08 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads