Bootstrap navbar collapse not working with bundled bootstrap files

Question

I want to include a navbar that I copied from the bootstrap example page in views of my asp.net application. The navbar is as follows,

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
            <a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
         </li>
         @if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
         {
         <li class="nav-item">
            <a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
         </li>
         }
         <li class="nav-item">
            <a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
         </li>
      </ul>
      @await Component.InvokeAsync("CheckoutSummary")
      @await Html.PartialAsync("LoginPartial")
      <form class="form-inline mt-2 mt-md-0">
         <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
   </div>
</nav> 

The navbar displays properly but it will not collapse when the button is clicked. The button is getting the click event you can tell since the button turns orange.

I have bundled my bootstrap and js files like this and include the vendor files in the view.

  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css.map",
      "node_modules/bootstrap/dist/css/bootstrap.css.map",
    ],
    "minify": { "enabled": true }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
      "node_modules/jquery/dist/jquery.min.js"
    ],
    "minify": { "enabled": false }
  }
]

Is there something I could be missing why the collapse button is not working?

Answer 1

It sounds like you are trying to copy the functionality of the last example on the navbar page. If so, it looks like you are missing some of their classes. try including them.

Here is the code from their example. For testing you could try starting with their example and slowly incorporate what you want to be in the navbar. This will help you figure out what you are missing.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

https://getbootstrap.com/docs/4.0/components/navbar/#external-content