Bootstrap 5 Dropdowns Single button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items.
Bootstrap 5 Dropdowns Single Button class:
- dropdown-toggle: This class is used to make the button drop down.
Syntax:
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="gfg" data-bs-toggle="dropdown"> ... </button> <ul class="dropdown-menu" aria-labelledby="gfg"> ... </ul> </div>
Example 1: In this example, we set a button using .btn class and button turned into a dropdown toggle.
<!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 Single button</ h5 >
</ div >
< div class = "dropdown p-3 text-center" >
< button class = "btn btn-success dropdown-toggle"
type = "button" data-bs-toggle = "dropdown" >
Select the Tourist place
</ button >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >
Taj Mahal,Agra
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Red fort, Delhi
</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
Manali
</ a >
</ li >
< li >
< a class = "dropdown-item" href = "#" >
The City of Lakes,Udaipur
</ a >
</ li >
< li >
< a class = "dropdown-item" href = "#" >
The Gateway of India, Mumbai
</ a >
</ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we set buttons using .btn class and the button turned into a dropdown toggle. Using dropdown-menu class, a list of items is shown on one click.
<!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 Single button</ h5 >
</ div >
< div class = "dropdown p-3 border text-center" >
< a class = "btn btn-primary dropdown-toggle"
href = "#" role = "button"
data-bs-toggle = "dropdown" >
Select the Course
</ a >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >
BSC</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
BPharma</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
M.Tech</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
B.Arch,Bachelor of Architecture</ a >
</ li >
< li >< a class = "dropdown-item" href = "#" >
LLB,(Bachelor of Law)</ a ></ li >
</ ul >
< a class = "btn btn-secondary dropdown-toggle"
href = "#" role = "button"
data-bs-toggle = "dropdown" >
Choose the Bike
</ a >
< ul class = "dropdown-menu" >
< li >< a class = "dropdown-item" href = "#" >
Hero</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
T.V.S</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
Apache</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
Platina</ a ></ li >
< li >< a class = "dropdown-item" href = "#" >
Hero Honda splendor</ a ></ li >
</ ul >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#single-button