Search code examples
asp.netasp.net-corebootstrap-4

Can't get the bootstrap dropdown working in ASP.NET


I am trying to create a dropdown in my ASP.NET Core Application.

The code for my dropdown origintes directly from getbootstrap.com:

<li class="nav-item">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <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>
   </div>
</li>

But all i get is a button with the dropdown arrow that isn't working at all.

I tried following the solution provided in this stackoverflow question, but that also didn't work. The button in its current state

I am using the default stylesheets and javascripts, which should be enough according to getbootstrap.com:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - HellBotWebUI</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/HellBotWebUI.styles.css" asp-append-version="true" />
</head>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

Solution

  • The ASP.NET Core web application templates use Bootstrap v5.1.0 by default so you need to look at the newer docs.