Bootstrap DropdownsDropdown 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 ExampleBootstrap Dropdown DividerThe class .divider is used to separate links inside the dropdown menu: See this example: Bootstrap Dropdown HeaderThe class .dropdown-header is used to add headers inside the dropdown menu. See this example: Bootstrap Dropdown: Disable an itemUse the class .disabled to disable an item in the dropdown menu. See this example: Bootstrap 4 Disable and Active ItemsTo 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 PositionIt 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 DropupIf you want the dropdown menu to expand upwards instead of downwards, change the
element with class="dropdown" to "dropup":
Example:Split Button DropdownsIt is used to show dropdowns as split buttons. Here we use all contextual classes. Example: Next Topicbootstrap Collapse
|