Bootstrap 5 Dropdowns Sizing
Bootstrap 5 Dropdowns SizingBootstrap 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
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
References: https://getbootstrap.com/docs/5.0/components/dropdowns/#sizing
Please Login to comment...