Bootstrap 5 Dropdowns Menu content Forms
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-w3wiki </ 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" > w3wiki </ 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-w3wiki </ 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" > w3wiki </ 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
Contact Us