Bootstrap Dropdowns
Dropdown menus are toggleable, contextual menus, used for displaying links in a list format. It facilitates users to choose one value from a predefined list. This can be made interactive with the dropdown JavaScript plugin.
You have to wrap dropdown menu within the class .dropdown to create Bootstrap Dropdown.
Bootstrap Dropdown Example
Bootstrap Dropdown Divider
The class .divider is used to separate links inside the dropdown menu:
See this example:
Bootstrap Dropdown Header
The class .dropdown-header is used to add headers inside the dropdown menu.
See this example:
Bootstrap Dropdown: Disable an item
Use the class .disabled to disable an item in the dropdown menu.
See this example:
Bootstrap 4 Disable and Active Items
To make an item active, highlight a specific dropdown item with the .active class (active item is appeared with a blue background color).
To disable an item in the dropdown menu, you have to use the .disabled class (It makes a light-grey text color and a "no-parking-sign" icon on hover).
Example:
Dropdown Position
It is used to position the dropdown items. By default dropdown is positioned at left. You can right-align the dropdown by adding the .dropdown-menu-right class to the element with .dropdown-menu.
Example:
Bootstrap 4 Dropup
If you want the dropdown menu to expand upwards instead of downwards, change the
Example:
Split Button Dropdowns
It is used to show dropdowns as split buttons. Here we use all contextual classes.
Example: