Dropdowns
Dropdown examples
You need to add data-bs-toggle="dropdown"
to initialize dropdown trigger
Add .active
or .disabled
to items in the dropdown to style them as active or disabled
Extend .dropdown-menu
with .dropdown-menu-animated
to apply animation when dropdown opened
Use .dropdown-icon
class with an icon inside to add an icon before the content
You can add circle bullet by using .dropdown-bullet
with <i>
tag
Insert header to a dropdown menu with .dropdown-header
and apply the class with <h*>
tag.
Dividing your dropdown items with .dropdown-divider
class
Make the dropdown menu centered below or above the toggle with .{dropdown|dropup}-center
on the parent element.
Change dropdown menu orientation by applying .dropstart|.dropend|.dropup
classes to .dropdown
elements
Apply .dropdown-menu-{start|end}
to .dropdown-menu
elements to change alignment
You can insert any elements into dropdown menu
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.
You can insert a submenu by implementing .dropdown-submenu-menu
element and it also support orientation classes .dropdown-submenu-{start|end}
Combine .dropdown-row
and .dropdown-col
to make the grid