{% extends 'layouts/vertical.html' %} {% block title %}Dropdowns{% endblock title %} {% block page_content %}
{% set title='Dropdowns' %} {% set subtitle='UI' %} {% include 'partials/page-title.html' %}

Examples

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Dropdowns on Bootstrap

Single Button Dropdowns

                                    
                                        <!-- Choose Option -->
                                        <div class="dropdown">
                                            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Choose Option
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" href="#">Profile Settings</a>
                                                <a class="dropdown-item" href="#">Notifications</a>
                                                <a class="dropdown-item" href="#">Logout</a>
                                            </div>
                                        </div>

                                        <!-- Quick Actions -->
                                        <div class="dropdown">
                                            <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Quick Actions
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                                <a class="dropdown-item" href="#">Create New</a>
                                                <a class="dropdown-item" href="#">Upload File</a>
                                                <a class="dropdown-item" href="#">View Reports</a>
                                            </div>
                                        </div>

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

Profile Settings Notifications Logout
Create New Upload File View Reports

Menu Alignment

                                    
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Right-aligned menu
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                            </div>
                                        </div>

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.

Action Another action Something else here

Custom Dropdown Arrow

                                    
                                        <!-- Without Arrow -->
                                        <div class="dropdown">
                                            <button class="btn btn-primary dropdown-toggle drop-arrow-none" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Without Arrow
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <a class="dropdown-item" href="#">Download Report</a>
                                                <a class="dropdown-item" href="#">View Analytics</a>
                                                <a class="dropdown-item" href="#">Export Data</a>
                                            </div>
                                        </div>

                                        <!-- Tabler Icon  -->
                                        <div class="dropdown">
                                            <button class="btn btn-outline-primary dropdown-toggle drop-arrow-none" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Tabler Icon <i class="ti ti-chevron-down align-middle ms-1"></i>
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                                <a class="dropdown-item" href="#">Edit Profile</a>
                                                <a class="dropdown-item" href="#">Account Settings</a>
                                                <a class="dropdown-item" href="#">Sign Out</a>
                                            </div>
                                        </div>

                                        <!-- Lucide Icon  -->
                                        <div class="dropdown">
                                            <button class="btn btn-primary dropdown-toggle drop-arrow-none" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Lucide Icon <i data-lucide="square-chevron-down" class="avatar-xxs ms-2"></i>
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                                <a class="dropdown-item" href="#">New Project</a>
                                                <a class="dropdown-item" href="#">Manage Team</a>
                                                <a class="dropdown-item" href="#">Billing Info</a>
                                            </div>
                                        </div>

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

Download Report View Analytics Export Data
Edit Profile Account Settings Sign Out
New Project Manage Team Billing Info

Split Button Dropdowns

                                    
                                        <!-- Primary -->
                                        <button type="button" class="btn btn-primary">Primary</button>
                                        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split drop-arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ti ti-chevron-down align-middle"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

                                        <!-- Secondary -->
                                        <button type="button" class="btn btn-light">Secondary</button>
                                        <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

                                        <!-- Success -->
                                        <button type="button" class="btn btn-soft-success">Success</button>
                                        <button type="button" class="btn btn-soft-success dropdown-toggle dropdown-toggle-split drop-arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ti ti-chevron-down align-middle"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

                                        <!-- Info -->
                                        <button type="button" class="btn btn-info">Info</button>
                                        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

                                        <!-- Warning -->
                                        <button type="button" class="btn btn-warning">Warning</button>
                                        <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

                                        <!-- Danger -->
                                        <button type="button" class="btn btn-danger">Danger</button>
                                        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Variant

                                    
                                        <!-- Primary -->
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Create New</a>
                                            <a class="dropdown-item" href="#">Save Changes</a>
                                            <a class="dropdown-item" href="#">Publish Now</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">View Drafts</a>
                                        </div>

                                        <!-- Secondary -->
                                        <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Settings</a>
                                            <a class="dropdown-item" href="#">Preferences</a>
                                            <a class="dropdown-item" href="#">Account Info</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Logout</a>
                                        </div>

                                        <!-- Success -->
                                        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Mark as Complete</a>
                                            <a class="dropdown-item" href="#">Download Report</a>
                                            <a class="dropdown-item" href="#">Submit Review</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Archive Task</a>
                                        </div>

                                        <!-- Info -->
                                        <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">View Logs</a>
                                            <a class="dropdown-item" href="#">System Info</a>
                                            <a class="dropdown-item" href="#">Help Center</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Contact Support</a>
                                        </div>

                                        <!-- Warning -->
                                        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Pending Approvals</a>
                                            <a class="dropdown-item" href="#">Overdue Tasks</a>
                                            <a class="dropdown-item" href="#">Subscription Expiring</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Renew Plan</a>
                                        </div>

                                        <!-- Danger -->
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Delete Item</a>
                                            <a class="dropdown-item" href="#">Revoke Access</a>
                                            <a class="dropdown-item" href="#">Reset Password</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Permanently Remove</a>
                                        </div>

The best part is you can do this with any button variant, too:

Create New Save Changes Publish Now
View Drafts
Settings Preferences Account Info
Logout
Mark as Complete Download Report Submit Review
Archive Task
View Logs System Info Help Center
Contact Support
Pending Approvals Overdue Tasks Subscription Expiring
Renew Plan
Delete Item Revoke Access Reset Password
Permanently Remove

Sizing

                                    
                                        <!-- Large button groups (default and split) -->
                                        <div class="btn-group">
                                            <button class="btn btn-light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Large button
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-light btn-lg" type="button">
                                                Large button
                                            </button>
                                            <button type="button" class="btn btn-lg btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>

                                        <!-- Small button groups (default and split) -->
                                        <div class="btn-group">
                                            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Small button
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group">
                                            <button class="btn btn-light btn-sm" type="button">
                                                Small button
                                            </button>
                                            <button type="button" class="btn btn-sm btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropup Variation

                                    
                                        <!-- Default dropup button -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Upload File</a>
                                                <a class="dropdown-item" href="#">Sync Data</a>
                                                <a class="dropdown-item" href="#">Import from CSV</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Advanced Settings</a>
                                            </div>
                                        </div>

                                        <!-- Split dropup button -->
                                        <div class="btn-group dropup">
                                            <button type="button" class="btn btn-light">
                                                Split dropup
                                            </button>
                                            <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">New Task</a>
                                                <a class="dropdown-item" href="#">Assign User</a>
                                                <a class="dropdown-item" href="#">Set Deadline</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Project Settings</a>
                                            </div>
                                        </div>

Trigger dropdown menus above elements by adding .dropup to the parent element.

Upload File Sync Data Import from CSV
Advanced Settings
New Task Assign User Set Deadline
Project Settings

Dropstart Variation

                                    
                                        <!-- Default dropstart button -->
                                        <div class="btn-group dropstart ">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropstart
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                                <a class="dropdown-item" href="#">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Separated link</a>
                                            </div>
                                        </div>

                                        <!-- Split dropstart button -->
                                        <div class="btn-group">
                                            <div class="btn-group dropstart" role="group">
                                                <button type="button" class="btn btn-secondary dropdown-toggle dropdown-split dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropstart</span>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#">Separated link</a>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-secondary">
                                                Split dropstart
                                            </button>
                                        </div>

Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropend Variation

                                    
                                        <!-- Default dropend button -->
                                        <div class="btn-group dropend">
                                            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropend
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">View Profile</a>
                                                <a class="dropdown-item" href="#">Message User</a>
                                                <a class="dropdown-item" href="#">Report Issue</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Block User</a>
                                            </div>
                                        </div>

                                        <!-- Split dropend button -->
                                        <div class="btn-group dropend">
                                            <button type="button" class="btn btn-primary">
                                                Split Dropend
                                            </button>
                                            <button type="button" class="btn btn-primary dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <span class="visually-hidden">Toggle Dropright</span>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">New Invoice</a>
                                                <a class="dropdown-item" href="#">Send Reminder</a>
                                                <a class="dropdown-item" href="#">Duplicate</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" href="#">Delete Invoice</a>
                                            </div>
                                        </div>

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

View Profile Message User Report Issue
Block User
New Invoice Send Reminder Duplicate
Delete Invoice

Active Item

                                    
                                        <!-- Active Item -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Active Item
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Regular link</a>
                                                <a class="dropdown-item active" href="#">Active link</a>
                                                <a class="dropdown-item" href="#">Another link</a>
                                            </div>
                                        </div>

Add .active to item in the dropdown to style them as active.

Regular link Active link Another link

Disabled Item

                                    
                                        <!-- Disabled -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary   dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Disabled
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" href="#">Regular link</a>
                                                <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
                                                <a class="dropdown-item" href="#">Another link</a>
                                            </div>
                                        </div>

Add .disabled to items in the dropdown to style them as disabled.

Regular link Disabled link Another link

Headers

                                    
                                        <!-- Header Item -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Header
                                            </button>
                                            <div class="dropdown-menu">
                                                <h6 class="dropdown-header">Dropdown header</h6>
                                                <a class="dropdown-item" href="#">Action</a>
                                                <a class="dropdown-item" href="#">Another action</a>
                                            </div>
                                        </div>

Add a header to label sections of actions in any dropdown menu.

Dropdown header
Action Another action

Dark Dropdowns

                                    
                                        <div class="dropdown">
                                            <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                Dark Dropdown
                                            </button>
                                            <ul class="dropdown-menu" data-bs-theme="dark">
                                                <li><a class="dropdown-item active" href="#">Dashboard</a></li>
                                                <li><a class="dropdown-item" href="#">My Orders</a></li>
                                                <li><a class="dropdown-item" href="#">Billing Settings</a></li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li><a class="dropdown-item" href="#">Logout</a></li>
                                            </ul>
                                        </div>

Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.

Centered Dropdowns

                                    
                                        <div class="dropdown-center">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                Centered dropdown
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Action</a></li>
                                                <li><a class="dropdown-item" href="#">Action two</a></li>
                                                <li><a class="dropdown-item" href="#">Action three</a></li>
                                            </ul>
                                        </div>

                                        <div class="dropup-center dropup">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                Centered dropup
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Action</a></li>
                                                <li><a class="dropdown-item" href="#">Action two</a></li>
                                                <li><a class="dropdown-item" href="#">Action three</a></li>
                                            </ul>
                                        </div>

Make the dropdown menu centered below the toggle with .dropdown-center on the parent element.

Dropdown Options

                                    
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
                                                Offset
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Profile Settings</a></li>
                                                <li><a class="dropdown-item" href="#">Privacy Settings</a></li>
                                                <li><a class="dropdown-item" href="#">Notification Preferences</a></li>
                                            </ul>
                                        </div>

                                        <div class="btn-group">
                                            <button type="button" class="btn btn-secondary">Reference</button>
                                            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Manage Subscription</a></li>
                                                <li><a class="dropdown-item" href="#">Account Preferences</a></li>
                                                <li><a class="dropdown-item" href="#">Help & Support</a></li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li><a class="dropdown-item" href="#">Log Out</a></li>
                                            </ul>
                                        </div>

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

Auto Close Behavior

                                    
                                        <div class="btn-group">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
                                                Default dropdown
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                            </ul>
                                        </div>

                                        <div class="btn-group">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                                Clickable inside
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                            </ul>
                                        </div>

                                        <div class="btn-group">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                Clickable outside
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                            </ul>
                                        </div>

                                        <div class="btn-group">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                                                Manual close
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                                <li><a class="dropdown-item" href="#">Menu item</a></li>
                                            </ul>
                                        </div>

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

Text

                                    
                                        <!-- Text Example -->
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-primary   dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Text Dropdown
                                            </button>
                                            <div class="dropdown-menu p-3 text-muted" style="max-width: 200px;">
                                                <p>
                                                    Some example text that's free-flowing within the dropdown menu.
                                                </p>
                                                <p class="mb-0">
                                                    And this is more example text.
                                                </p>
                                            </div>
                                        </div>

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

Forms

                                    
                                        <!-- Forms -->
                                        <div class="dropdown">
                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Form
                                            </button>
                                            <div class="dropdown-menu">
                                                <form class="px-4 py-3">
                                                    <div class="mb-3">
                                                        <label for="exampleDropdownFormEmail1" class="form-label">Email
                                                            address</label>
                                                        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                                                        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                                                    </div>
                                                    <div class="mb-2">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" id="dropdownCheck">
                                                            <label class="form-check-label" for="dropdownCheck">
                                                                Remember me
                                                            </label>
                                                        </div>
                                                    </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>
                                        </div>

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

New around here? Sign up Forgot password?
{% endblock page_content %}