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.