Navbar dropdown (collapse) is not working in Bootstrap 5

by

The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

Demo

As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.

Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.

More Related Contents:

  1. Datepicker validation 18 years of age [closed]
  2. Should the Bootstrap media queries be saved in a css file or a js file?
  3. Changing nav-bar color after scrolling?
  4. Bootstrap close responsive menu “on click”
  5. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  6. How to partition input field to appear as separate input fields on screen?
  7. How to create a responsive image that also scales up in Bootstrap 3
  8. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  9. Bootstrap Dropdown with Hover
  10. How to resize Twitter Bootstrap modal dynamically based on the content
  11. How to add smooth scrolling to Bootstrap’s scroll spy function
  12. Bootstrap Dropdown menu is not working
  13. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  14. How to hide css and js version details from weppalyzer in PHP
  15. How to make page loaders/animations/transitions
  16. HTML text-overflow ellipsis detection
  17. Positioning element at center of screen
  18. Using jQuery how to get click coordinates on the target element
  19. Is it possible to dynamically scale text size based on browser width?
  20. How to change active class while click to another link in bootstrap use jquery?
  21. How to build simple tabs with jQuery?
  22. Blur Img’s & Div’s in HTML using CSS
  23. Google Maps API v3: InfoWindow not sizing correctly
  24. Add CSS to with JavaScript?
  25. Scroll Position of div with “overflow: auto”
  26. Styling Vuetify selectors
  27. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  28. HTML5 Video duration without playing video
  29. How to get element by class name
  30. Split text into pages and present separately (HTML5)

Leave a Comment