HTML CSS Bootstrap Dropdown

HTML CSS examples for Bootstrap:Dropdown


Click the following links for the tutorial for Bootstrap and Dropdown.

  1. Open Bootstrap Dropdown Menu on Hover Rather than Click
  2. Segmented Dropdown Button Groups
  3. Icons inside Dropdowns
  4. Dropdowns within a Navbar
  5. Dropdowns within Buttons
  6. Dropdowns within Split Buttons
  7. Dropdowns within Button Group
  8. Dropdowns via Data Attributes

  9. Dropdowns via JavaScript
  10. Dropdown Methods dropdown('toggle')
  11. Caret Icon on drop down
  12. Dropdowns within Navs
  13. Dropdown button size
  14. Dropdown inside vertically stacked button groups
  15. Creating the Dropup Menus
  16. Creating the Right Aligned Dropdown Menus

  17. Adding Headers to Dropdown Items
  18. Disable Items within a Dropdown
  19. Adding Dropdowns via JavaScript
  20. Dropdown Options, $().dropdown('toggle')
  21. Dropdown Events
  22. Add .divider class to separate links inside the dropdown menu with a thin horizontal border:
  23. The .dropdown-header class adds headers inside the dropdown menu:
  24. To disable an item in the dropdown menu, use .disabled class
  25. To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:
  26. To expand dropdown menu upwards instead of downwards, change the <div> element with class="dropdown" to "dropup"
  27. Add role and aria-* attributes, when creating a dropdown menu:
  28. Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu
  29. Perform a case-insensitive search for items in a dropdown menu:
  30. Change the caret icon to upside down in drop down
  31. Multi-Level Dropdowns
  32. Create a custom .dropdown-submenu class for multi-level dropdowns: