Open In App

Bootstrap 5 Dropdowns Menu content Forms

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
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=
"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:

1

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:

2

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#forms


Next Article
Bootstrap 5 Dropdowns Dark dropdowns

P
prashantrathore1159
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox