diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 9f444d567295991df44a9245035f01cb628f8f14..15f810be81744fa389e2a10bbb0fb87dc856b029 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -474,6 +474,55 @@ Separate groups of related menu items with a divider. </div> {% endexample %} +## Menu forms + +Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) to give it the negative space you require. + +{% example html %} +<div class="dropdown-menu"> + <form class="px-4 py-3"> + <div class="form-group"> + <label for="exampleDropdownFormEmail1">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormPassword1">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> + <div class="dropdown-divider"></div> + <a class="dropdown-item" href="#">New around here? Sign up</a> + <a class="dropdown-item" href="#">Forgot password?</a> +</div> +{% endexample %} + +{% example html %} +<form class="dropdown-menu p-4"> + <div class="form-group"> + <label for="exampleDropdownFormEmail2">Email address</label> + <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com"> + </div> + <div class="form-group"> + <label for="exampleDropdownFormEmail2">Password</label> + <input type="password" class="form-control" id="exampleDropdownFormEmail2" placeholder="Password"> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Remember me + </label> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> +</form> +{% endexample %} + ## Disabled menu items Add `.disabled` to items in the dropdown to **style them as disabled**.