MVC bootstrap navbar not working after running NuGet updates

Twitter Bootstrap asp.net Mvc-5 Nuget Package

Twitter Bootstrap Problem Overview

An MVC app broke after we updated all the NuGet packages. After trying everything I created a new MVC app, updated the NuGet packages and the basic navbar...

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Application name</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/Contact">Contact</a></li>
            </ul>
            
<ul class="nav navbar-nav navbar-right">
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>


        </div>
    </div>
</div>

... looks like this ...

...and clicking the icon...

Any ideas what could be causing this?

Have tried manually adding Bootstrap.css and Bootstrap.js to _Layout.vbhtml, but no difference

Thank you

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

Finally, I managed my HTML and yours. There're a lot of changes in Bootstrap 4 in compare to version 3. Regarding your markup, you have to change:

"Navbar-inverse" to "Navbar-dark" and use color "bg-dark".
Add few attributes to button, as "aria-controls", "aria-expanded", "aria-label" and "data-target" for link to another element.
Property "id" to collapsable element.
For list elements (tag LI) should be added class="nav-item"
For links unside list elements add class="nav-link".
I suggest to add "mr-auto" to list definiton.

All changes below. Tested here.

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <a class="navbar-brand" href="/">Application name</a>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="nav navbar-nav mr-auto">
        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
        <li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
        <li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
      </ul>

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

Solution 2 - Twitter Bootstrap

Thanks, Drac. Great answer.

For anyone that wants the Razor code, here's mine:

[EDIT: Code includes changes suggested by @Suhani / @Sagi / @Doug Dekker / @Guilder ]

This is _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        @Html.ActionLink("My Web Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse" id="navbarSupportedContent">

            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

and this is _LoginPartial.cshtml

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()
    <ul class="nav navbar-nav navbar-right mr-auto">
        <li class="nav-item">@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "nav-link" })</li>
        <li class="nav-item"><a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right me-auto">
    <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" })</li>
    </ul>
}

Solution 3 - Twitter Bootstrap

Thanks Drac , great answer. For a "hamburger" button just like in version 3.3, add this code :

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

Solution 4 - Twitter Bootstrap

Thanks Jon! I tried the code and works well.

After adding the HTML Attribute to the Action Link in lists, the Index action was red - somehow MVC couldn't find the Index Method. I added "null" after the "Home" Controller and it went away. Posting it here , so someone can benefit from it.

<ul class="nav navbar-nav mr-auto">
    <li class="nav-item">@Html.ActionLink("Home","Index", "Home",null, new { @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("About", "About", "Home",null, new { @class = "nav-link" })</li>
    <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home",null, new { @class = "nav-link" })</li>
</ul>

Solution 5 - Twitter Bootstrap

All of the above answers amazing.

My solution is temporary and shorter: Uninstall bootstrap and reinstall older version.

In Package-manager console: To uninstall, type this: uninstall-package bootstrap

once done, reinstall the old version which worked, eg: install-package bootstrap -Version 3.3.7

Solution 6 - Twitter Bootstrap

What's causing the issue is that Bootstrap 4 can't recognize classes from Bootstrap 3, and Bootstrap 3 is what ASP .NET uses at this point. Just downgrade to Bootstrap 3.3.7 from NuGet and you'll be good to go.

Solution 7 - Twitter Bootstrap

WORKING WITH MVC WebAPI PROJECT

File Name : _Layout.cshtml

Simply replace the body first nav-bar div tag content with the following and check it.

<div class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
                @Html.ActionLink("Ebille", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
                    <li class="nav-item">@Html.ActionLink("API", "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
                </ul>
            </div>
        </div>
    </div>

Add Fontawesome inside head tag. Copy the code provided here

> The above content is tested for initial default app created by Visual Studio 2019 MVC + WebAPI project.

Solution 8 - Twitter Bootstrap

Just uninstall the updated modules. I'm pretty sure it's Antlr Package and Bootstrap. Downgrade them to 3.4.1 and 3.3.0 respectively. This helped my issue.

Solution 9 - Twitter Bootstrap

Late arrival but hope this helps someone as this issue was a struggle for me.

My toolbar was borked after updating from v3 to v4. Didn't work until I had the necessary references listed below. Please note that they are local references, but they should be similar to your project.

<!DOCTYPE html>
<html>
<head>
   <!-- Latest compiled and minified CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="~/Scripts/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</head>
</html>

Solution 10 - Twitter Bootstrap

Here's what worked for me from a new project (edited from @Drac's post):

Solution 11 - Twitter Bootstrap

Here's some code for the default _LoginPartial.cs that comes from adding "Individual User Accounts" Authentication:

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
        @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class="nav-link" })</li>
        <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class="nav-link" })</li>
    </ul>
}

Solution 12 - Twitter Bootstrap

Use Bootstrap 3 themes https://bootswatch.com/3/ to make it work in ASP.NET MVC 5 application. Download the bootstrap.css file and place it in your content folder. And update the reference if you want in BundleConfig.cs under Content.

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap-lumen3.css",
                      "~/Content/site.css"));

Since there is no backward compatibility from bootstrap 4.3 to 3. Its better to use bootstrap 3.

Solution 13 - Twitter Bootstrap

This could have most probably happened because of the Bootstrap Version issue. If using older version, updating to new Bootstrap version can break UI. You have to manually convert the older tags and attributes to new one.

> Or temporarily you can fix the issue by checking which version of > Bootstrap you were using earlier and restoring to older version can > fix UI issue at immediate effect.

Solution 14 - Twitter Bootstrap

The easiest solution, IMHO, is to go to one of the Bootswatch themes and view the Navbar components:

https://bootswatch.com/cerulean

Click the navbar you want to mimick and it will show you the source code for the navbar. You can do this for different versions of Bootstrap too. This example is for 4.4.1.

The navbar image below will give you the code that follows.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Solution 15 - Twitter Bootstrap

Even I do know this is a side answer, I thing it is a good place to share alternative solution. For me the key was to downgrade bootstrap4 back to bootstrap3 and add modernizr "client script library into Scripts folder", then like a charm it started work again. With the solutions above, I have problems regarding menus and dropdowns in menus.

Content Type	Original Author	Original Content on Stackoverflow
Question	gchq	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	Arseniy	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	Jon Roberts	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	Sagi	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	Suhani	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Thys	View Answer on Stackoverflow
Solution 6 - Twitter Bootstrap	szdrnja	View Answer on Stackoverflow
Solution 7 - Twitter Bootstrap	Pishang Ujeniya	View Answer on Stackoverflow
Solution 8 - Twitter Bootstrap	Chandima Chathura	View Answer on Stackoverflow
Solution 9 - Twitter Bootstrap	Brendan Sluke	View Answer on Stackoverflow
Solution 10 - Twitter Bootstrap	Artorias2718	View Answer on Stackoverflow
Solution 11 - Twitter Bootstrap	Artorias2718	View Answer on Stackoverflow
Solution 12 - Twitter Bootstrap	Simranjit Kaur	View Answer on Stackoverflow
Solution 13 - Twitter Bootstrap	Mithun Balakrishnan	View Answer on Stackoverflow
Solution 14 - Twitter Bootstrap	smoore4	View Answer on Stackoverflow
Solution 15 - Twitter Bootstrap	Honza P.	View Answer on Stackoverflow