Open In App

Bootstrap 5 Dropdowns Sizing

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5  Dropdowns Sizing is used to create dropdowns on different sizes of buttons. It normally works on any size of a button, there can be a single large button or a split small button. 

Bootstrap 5  Dropdowns Sizing Class:

There is no pre-defined class for this you can use the Bootstrap 5 Dropdowns and Bootstrap 5 Button Sizes to customize your dropdowns.

Syntax:

<div class="btn-group">
<button class="btn ... dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="...">
...
</button>
<ul class="dropdown-menu">
...
</ul>
</div>

Example 1: The following code demonstrates the buttons of different sizing (large and small).

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>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h2>Bootstrap 5 Dropdowns Sizing</h2>
        <br>
        <div class="btn-group">
            <button class="btn btn-secondary btn-lg
                           dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                Data Structures
            </button>
            <ul class="dropdown-menu">
                <li>Arrays</li>
                <li>Linked Lists</li>
                <li>Queues</li>
                <li>Stacks</li>
            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary btn-sm
                           dropdown-toggle" type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                Languages
            </button>
            <ul class="dropdown-menu">
                <li>C++</li>
                <li>C</li>
                <li>Java</li>
                <li>Python</li>
            </ul>
        </div>
    </div>
</body>
 
</html>


Output:

Bootstrap 5  Dropdowns Sizing

Bootstrap 5  Dropdowns Sizing

Example 2: The following code demonstrates the Split dropdown buttons.

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>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h2>Bootstrap 5 Dropdowns Sizing</h2>
        <br>
        <div class="btn-group">
            <button class="btn btn-secondary
                             btn-lg"
                    type="button">
                Web Development
            </button>
            <button type="button"
                    class="btn btn-lg btn-secondary
                        dropdown-toggle
                        dropdown-toggle-split"
                    data-bs-toggle="dropdown">
            </button>
            <ul class="dropdown-menu">
                <li>HTML</li>
                <li>CSS</li>
                <li>Javascript</li>
            </ul>
        </div>
    </div>
</body>
</html>


Output:

Bootstrap 5  Dropdowns Sizing

Bootstrap 5  Dropdowns Sizing



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