Bootstrap 5 Dropdowns Menu content Forms
Last Updated :
15 Feb, 2023
Bootstrap 5 Dropdown Menus in forms is a form element that displays a list of options, allowing the user to select one. Dropdown menus are often used for fields such as selection or options from a list. The Menu content Forms facilitates including the form within a dropdown menu or creating a simple dropdown menu by implementing the margin or padding utilities.
Menu content forms Class: There is no specific class used for dropdown menu content forms. To create a button, we use the .btn class, and to create a dropdown menu, we use the .dropdown-menu class.
Syntax:
<div class="dropdown-menu">
<form class="px-* py-*">
<div class="mb-...">
<input type="..." class="form-control"
placeholder="...">
</div>
</form>
</div>
Example 1: In this example, we set the dropdown button in the form of a dropdown using the .dropdown classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >
Bootstrap 5-GeeksforGeeks
</ title >
< 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 Forms
</ h5 >
</ div >
< div class="dropdown p-3 border bg-light
text-center dropend" style = "height:120px;" >
< button class = "btn btn-success dropdown-toggle"
type = "button"
data-bs-toggle = "dropdown" >
Give The Details
</ button >
< div class = "dropdown-menu text-bg-light" >
< form class = "px-2 py-4" >
< div class = "mb-2" >
< input type = "name"
class = "form-control"
placeholder = "Full name" >
</ div >
< div class = "mb-2" >
< input type = "address"
class = "form-control"
placeholder = "Address" >
</ div >
< div class = "mb-2" >
< input type = "number"
class = "form-control"
placeholder = "Contact number" >
</ div >
< div class = "mb-2" >
< input type = "mail"
class = "form-control"
placeholder = "Email id " >
</ div >
< div class = "mb-2" >
< div class = "form-check" >
< input type = "checkbox"
class = "form-check-input" >
< label class = "form-check-label"
for = "dropdownCheck" >
Done
</ label >
</ div >
</ div >
</ form >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we set the multiple dropdown button in the form of a dropdown using the .dropdown classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >
Bootstrap 5-GeeksforGeeks
</ title >
< 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 Split button
</ h5 >
</ div >
< div class = "p-3 border bg-light text-center" >
< div class = "btn-group dropstart" >
< button type = "button"
class="btn btn-primary
dropdown-toggle
dropdown-toggle-split"
data-bs-toggle = "dropdown" >
</ button >
< button type = "button"
class = "btn btn-secondary" >
Login Account
</ button >
< span class = "visually-hidden" >
Toggle Dropdown
</ span >
< div class = "dropdown-menu" >
< form class = "px-2 py-3" >
< div class = "mb-4" >
< input type = "Name"
class = "form-control"
placeholder = "User name" >
</ div >
< div class = "mb-4" >
< input type = "password"
class = "form-control"
placeholder = "password" >
</ div >
< div class = "mb-4" >
< input type = "security"
class = "form-control"
placeholder = "security key" >
</ div >
< div class = "mb-4" >
< input type = "Number id"
class = "form-control"
placeholder = "Captcha" >
</ div >
</ form >
</ div >
</ div >
< div class = "btn-group dropdown" >
< button type = "button"
class="btn btn-warning
dropdown-toggle
dropdown-toggle-split"
data-bs-toggle = "dropdown" >
</ button >
< button type = "button"
class = "btn btn-danger" >
Fill form
</ button >
< span class = "visually-hidden" >
Toggle Dropdown
</ span >
< div class = "dropdown-menu" >
< form class = "px-2 py-3" >
< div class = "mb-4" >
< input type = "Name"
class = "form-control"
placeholder = "first name" >
</ div >
< div class = "mb-4" >
< input type = "name"
class = "form-control"
placeholder = "Last name " >
</ div >
< div class = "mb-4" >
< input type = "course"
class = "form-control"
placeholder = "Course" >
</ div >
< div class = "mb-4" >
< input type = "college"
class = "form-control"
placeholder = "College name" >
</ div >
</ form >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#forms
Share your thoughts in the comments
Please Login to comment...