Dropdowns
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.
Theme Customization
it's time to style according to your choice ..!
Layout
Choose your layout