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:
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: