Default dropdowns
Create dropdowns with Bootstrap using the
<div class="dropdown"> class and
<button class="btn btn-secondary
dropdown-toggle">
for the toggle. Include
<ul class="dropdown-menu"> for the menu
items.
Dropdown Color Variant
Use dropdown color variants in Bootstrap by
applying color classes like .btn-primary or
.btn-success to the
<button class="btn btn-primary"> for
different styles.
Split Button Dropdown
Create a split button dropdown with
Bootstrap by using .btn-group and
.dropdown-toggle-split classes. Apply these to
separate the button and dropdown toggle.
Dropdown Sizing
Use btn-lg class to create a large size
dropdown button and btn-sm to create a small
size dropdown button.
Dropdown Colors
Dark Dropdowns
Style dark dropdowns with Bootstrap by
using the .dropdown-menu-dark class on the
<ul> element for a dark theme.
Hover dropdowns
Enable hover dropdowns with Bootstrap by
using the .dropdown-hover class. Apply this
class to the
<div class="dropdown"> container for
dropdowns that appear on hover.
Alignment options
Align dropdown menus with Bootstrap using
.dropdown-menu-end to right-align and
.dropdown-menu-start to left-align the dropdown
menu relative to the toggle button.
Dropdown Menu Item Color
Dropdown Options
Customize dropdown options in Bootstrap
with data-bs-offset to adjust the dropdown
position and data-bs-reference to specify the
reference element for positioning.
Auto Close Behavior
Control auto-close behavior of dropdowns in
Bootstrap using the
data-bs-auto-close attribute. Set it to
"true", "outside", or
"inside" to define when the dropdown should
close automatically.
Dropdown Menu Item Color
Dropdown Menu Success link example
Add .disabled to items in the dropdown to
style them as disabled
Dropdown Menu Disabled example
Add .disabled to items in the dropdown to
style them as disabled
Menu Content
Example of dropdown menu containing
Headers, Text and Forms content.