Open In App

Bootstrap 5 Dropdowns Single Button

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Dropdowns Single button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. 

Bootstrap 5 Dropdowns Single Button class:

  • dropdown-toggle: This class is used to make the button drop down.

Syntax:

<div class="dropdown">
    <button class="btn dropdown-toggle" type="button" 
            id="gfg" data-bs-toggle="dropdown">
        ...
    </button>
    <ul class="dropdown-menu" aria-labelledby="gfg">
        ...
    </ul>
</div>

Example 1: In this example, we set a button using .btn class and button turned into a dropdown toggle.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
     "width=device-width, initial-scale=1.0">
 
    <link href=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body class="m-2">
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Dropdowns Single button</h5>
    </div>
    <div class="dropdown p-3 text-center">
        <button class="btn btn-success dropdown-toggle"
            type="button" data-bs-toggle="dropdown">
            Select the Tourist place
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">
                    Taj Mahal,Agra
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                    Red fort, Delhi
                </a>
            </li>
            <li><a class="dropdown-item" href="#">
                    Manali
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    The City of Lakes,Udaipur
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    The Gateway of India, Mumbai
                </a>
            </li>
        </ul>
    </div>
</body>
</html>


Output:

 

Example 2:  In this example, we set buttons using .btn class and the button turned into a dropdown toggle. Using dropdown-menu class, a list of items is shown on one click.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
        rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body class="m-2">
    <div class="container text-center ">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h5>Bootstrap 5 Dropdowns Single button</h5>
    </div>
    <div class="dropdown p-3 border text-center">
         
        <a class="btn btn-primary dropdown-toggle"
            href="#" role="button"
            data-bs-toggle="dropdown">
            Select the Course
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">
                BSC</a></li>
            <li><a class="dropdown-item" href="#">
                BPharma</a></li>
            <li><a class="dropdown-item" href="#">
                M.Tech</a></li>
            <li><a class="dropdown-item" href="#">
                B.Arch,Bachelor of Architecture</a>
            </li>
            <li><a class="dropdown-item" href="#">
                LLB,(Bachelor of Law)</a></li>
        </ul>
        <a class="btn btn-secondary dropdown-toggle"
            href="#" role="button"
            data-bs-toggle="dropdown">
            Choose the Bike
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">
                Hero</a></li>
            <li><a class="dropdown-item" href="#">
                T.V.S</a></li>
            <li><a class="dropdown-item" href="#">
                Apache</a></li>
            <li><a class="dropdown-item" href="#">
                Platina</a></li>
            <li><a class="dropdown-item" href="#">
                Hero Honda splendor</a></li>
        </ul>
    </div>
</body>
 
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#single-button



Last Updated : 17 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads