Open In App

Bootstrap 5 Dropdowns Menu content Forms

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 15 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads