I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5
.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav
icon or dropdown
button,no dropdown menu
apears.
I want to specially mention that I also included the jquery
file. But it didn't work. Can anyone please tell me what is happening here?
One last thing,I faced severel issues with some others bootstrap
classes like mr-auto
,ml-auto
etc.Is it any bug or new classes come with bootstrap 5
for this kind of job?
Here is my code:
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>
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
.