Bootstrap 5 Dropdowns Menu Content Text
Last Updated :
30 Jan, 2023
Bootstrap 5 Dropdowns Menu Content text is placed in the freeform in the dropdown menu. There is no special margin to place the text within a dropdown menu.
Pre-requisite: Bootstrap 5 Dropdown, Bootstrap 5 Spacing & Bootstrap 5 Buttons.
Bootstrap 5 Dropdowns Menu content Text classes: There is no specific class used for Dropdowns Menu content Text. To create a button, we use the .btn class, and to create a dropdown-menu, we use the .dropdown-menu class.
Syntax:
<div class="btn-group" role="group">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
....
</button>
<div class="dropdown-menu">
<p> ... </p>
<p class="mb-*">... </p>
...
</div>
</div>
Note: The * can take values 0,1,2,3 and so on.
Example 1: In this example, we set the text with a different margin within the dropdown menu toggle button.
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 >
< script src =
</ script >
</ head >
< body class = "m-2" >
< div class = "container text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Dropdowns Menu content Text</ h5 >
</ div >
< div class = "p-3 border bg-light text-center" >
< div class = "btn-group dropend" role = "group" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown" >
Select the course
</ button >
< div class = "dropdown-menu border" >
< p >
B.tech
</ p >
< p class = "mb-1" >
B.pharma
</ p >
< p >
MCA
</ p >
< p class = "mb-3" >
M.tech
</ p >
< p >
Bed
</ p >
< p class = "mb-2" >
BSC Agriculture
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Dropdowns Menu content Text
Example 2: In this example, we set a split button with the text at different margins within the dropdown menu.
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 >
< script src =
</ script >
</ head >
< body class = "m-2" >
< div class = "container text-center " >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h5 >Bootstrap 5 Dropdowns Menu content Text</ h5 >
</ div >
< div class = "p-3 border text-center bg-light"
style = "height:100px;" >
< div class = "btn-group dropstart" >
< button type = "button" class="btn btn-primary
dropdown-toggle dropdown-toggle-split"
data-bs-toggle = "dropdown" >
< button type = "button" class = "btn btn-danger" >
Select the City
</ button >
</ button >
< div class = "dropdown-menu" >
< p >
Lucknow
</ p >
< p class = "mb-1" >
Agra
</ p >
< p >
Mathura
</ p >
< p class = "mb-3" >
Jaipur
</ p >
</ div >
</ div >
< div class = "btn-group dropend " >
< button type = "button" class = "btn btn-success" >
Select the Car
</ button >
< button type = "button" class="btn btn-info dropdown-toggle
dropdown-toggle-split" data-bs-toggle = "dropdown" >
</ button >
< div class = "dropdown-menu" >
< p >
Swift Dzire
</ p >
< p class = "mb-0" >
Celerio
</ p >
< p >
Maruti suzuki
</ p >
< p class = "mb-1" >
XUV 500
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Dropdowns Menu content Text
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#text
Share your thoughts in the comments
Please Login to comment...