Bootstrap 5 Dropdowns Single Button

Last Updated : 24 Jul, 2024

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </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

Comment

Explore