I am new to MVC. I have been trying to resolve the issue now for 2 days non-stop (yes 48 hours) on my own before reaching out for help. But for some reason I cannot get the scripts for my bootstrap project to work. I have tried everything I can possibly try so any help is appreciated. I am using Bootstrap v4.60 and have jqueryv3.6 in my VS2019 project.
My Partial Bundle
bundles.Add(new Bundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new Bundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.bundle.js")); /*This comes bundled with popper */
My Partial Layout
<head>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</head>
<div class="container">
@RenderBody()
</div>
.
.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
The dropdown in my navbar does not work and I am quite certain I've done everything I have been told to do
Navbar dropdown toggle
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
What am I missing?