Bootstrap 5 Dropdowns Menu content Forms

Last Updated : 29 Jul, 2024

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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet">     <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">     </script>     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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.

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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"          rel="stylesheet">     <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">     </script>     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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

Bootstrap 5 Dropdowns Options

prashantrathore1159

Improve

Article Tags :

Bootstrap 5 Dropdowns Menu content Forms

Similar Reads