Navigation bar dropdown menu not working on asp.net mvc

Question

I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside on the ecommerce app I'm making, but the dropdown function is not working as intended.

_layout.cshtml

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-controller="Movies" asp-action="Index">eMovies</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i> Movies</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="badge-info bi-gear"></i> Management
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"><i class="bi bi-camera-reels"></i> Cinemas</a>
                            <a class="dropdown-item" asp-controller="Producers" asp-action="Index"><i class="bi bi-headset"></i> Producers</a>
                            <a class="dropdown-item" asp-controller="Actors" asp-action="Index"><i class="bi bi-person-square"></i> Actors</a>
                        </div>
                    </li>
                </ul>

                <!-- etc -->

            </div>
        </div>
    </nav>
</header>

Here's my github repository for the project for reference, to get to code above go from eMovies/Views/Shared/_layout.cshtml

https://github.com/johnvillasenor/ecommerce-aspnet-mvc-app

Help is much appreciated:)

Answer 1

Have to reference bootsrap correctly and make sure you're using the latest version of bootsrap css and js.

Latest compiled CSS and javascript(boostrap 5.2 should work as well):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>