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).
<!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.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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:
Example 2: The following code demonstrates the Split dropdown buttons.
<!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.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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:
