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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap 5-GeeksforGeeks
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap 5-GeeksforGeeks
</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</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