MVC bootstrap navbar not working after running NuGet updates

upgrade bootstrap 3 to 4 visual studio
bootstrap lumen not working mvc
bootstrap 4 navbar
asp.net mvc bootstrap 4
update bootstrap 3 to 4 asp net core
navbar toggle not working
nuget bootstrap
asp.net bootstrap

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

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:

  1. "Navbar-inverse" to "Navbar-dark" and use color "bg-dark".
  2. Add few attributes to button, as "aria-controls", "aria-expanded", "aria-label" and "data-target" for link to another element.
  3. Property "id" to collapsable element.
  4. For list elements (tag LI) should be added class="nav-item"
  5. For links unside list elements add class="nav-link".
  6. 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>

Bootstrap and MVC 4: Fixing the Navbar, User -arun- submitted a question via my blog about how to fix a problem with rendering the Duration: 6:30 Posted: Oct 13, 2012 Found the issue relating to the jquery error, not related. Created a basic html page with just the navbar. With no references to css or js the page loads the same as with references included to bootstrap.css, jquery-3.3.1,js and bootsrap.js as in the screenshot!! The question is the same for me.

Thanks, Drac. Great answer.

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

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

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" })</li>
        <li class="nav-item"><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
}
}
else
{
    <ul class="nav navbar-nav navbar-right mr-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>
}

Migrating from Bootstrap 3 to 4, Look into a migrating scenario from a simple Bootstrap 3 website to landing page of our demo website rendering incorrectly after including Bootstrap 4. div class = "collapse navbar-collapse" id = "navbar-collapse" > As such, we must update the Bootstrap 3 pagination markup, from: NET MVC ASP. Not able to install bootstrap 4 (beta) nuget package to .Net MVC (.Net version 4.6.2) I am not able to install bootstrap 4(beta) to my MVC project. To be precise popper.js nuget dependency is failing to install. Could not install package 'popper.js 1.11.0'.

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>

MVC Bootstrap Form Example: ASP.NET and Bootstrap 4, NET projects ship with Bootstrap 3 instead of the recently updated Bootstrap 4. We'll then examine several MVC Bootstrap form examples in both MVC 5 and . Whichever way you do it, you'll install the Bootstrap 4 nuget package. If you have a suggestion as to how to fix this, please let me know in the  User -arun- submitted a question via my blog about how to fix a problem with rendering the navbar at the top of the page when the responsive design elements kick in. Here's how to fix it, as well

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>

Bootstrap + Mvc, User “arun” wrote in on my previous post, asking about a problem with the rendering of the navbar when the responsive design elements  Using Bootstrap In ASP.NET Core MVC. Bootstrap 4 is now ready to be used with ASP.NET Core MVC application.If you are planning, not to use the default layout template created by visual studio, then you can ignore the below part of the article, You can implement one of the templates from bootstrap website. If you are planning to use the default project template with some changes, then proceed further.

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

ASP.NET MVC - Bootstrap, css and then run your application again, you will see the following output. CSS classes. You will see that we still have a navbar, but now it's not using inverse  Working with colors At this point, you have to work with Content/bootstrap.css file. You can change all the related colors of every thing, you want in your Application. For example: navbar color, navbar text color etc. Here, we will explain some of them. This code can change the color of the navbar.

navigation bar is not working properly in Bootstrap, Hi, I want to display a navigation bar following is my code <nav class="navbar navbar-default"> <div class="container-fluid"> <div  dotnet add package bootstrap-rating.mvc --version 1.0.0 <PackageReference Include="bootstrap-rating.mvc" Version="1.0.0" /> For projects that support PackageReference , copy this XML node into the project file to reference the package.

Upgrade bootstrap 3 to 4 in ASP.NET Core MVC Identity deafult , NET Core MVC template, which uses twitter bootstrap v3.3.7. Now if you run the application(F5) you will notice that the UI is broken, which is the <nav class​="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <a Note: As we know Identity is provided as a nuget package and if we like to  Bootstrap 4 greatly simplifies the navbar. However, this simplification will require us to make several changes to our markup, in order to get the navbar working again. Firstly, we no longer need the div, wrapping the navbar contents, to which the container-fluid class is applied, because navbars are now fluid by default.

How To Add Bootstrap In ASP.NET (MVC & Web Forms), You have to upgrade the Bootstrap NuGet package to add the latest version of bootstrap <div id=”navbar” class=”navbar-collapse collapse”> Building Beautiful, Responsive Sites with Bootstrap¶ By Steve Smith. Bootstrap is currently the most popular web framework for developing responsive web applications. It offers a number of features and benefits that can improve your users’ experience with your web site, whether you’re a novice at front-end design and development or an expert.

Comments
  • Which Bootstrap version you're using and have you checked/noticed errors in browser's dev tools (console log)? I tested provided markup in this fiddle as reference.
  • Bootstrap 4.0. Your fiddle works as intended.
  • The navbar served in the original application is also throwing 'Exception thrown and not caught' in jquery-3.3.1.js at line 3827 - the basic navbar shows no errors, just seems to ignore all css.
  • Found the issue relating to the jquery error, not related. Created a basic html page with just the navbar. With no references to css or js the page loads the same as with references included to bootstrap.css, jquery-3.3.1,js and bootsrap.js as in the screenshot!! Totally baffling :-(
  • The question is the same for me. I just created new project , updated all Nuget-packages and run site. Page looks the same as yours. Navigation bar works unproperly. Have you found a solution?
  • Kind of them to break everything without any backward compatibility, and no warnings!!! Thank you
  • @gchq The version number itself indicates no backward compatibility. That is basically what the first number means: major non backward-compatible changes.
  • A warning that it breaks everything would, of course, be nice :-)
  • As @Suhani mentioned you should add null at actionlink extension.
  • The button on the Layout page should contain a span tag with the "navbar-toggler-icon" class
  • Thank you for supplying this! As a fix, _LoginPartial.cshtml <ul> nodes should use 'ml-auto' instead of 'mr-auto' to fully right-align the Register/Login buttons and/or username.
  • Thank you, I benefited!
  • The most easiest way is this one