56

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 ...

NavBar

...and clicking the icon...

NavBar Open

Any ideas what could be causing this?

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

Thank you

gchq
  • 1,603
  • 2
  • 27
  • 52
  • 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](https://jsfiddle.net/kdmoqp4f/) as reference. – Tetsuya Yamamoto Feb 01 '18 at 02:05
  • Bootstrap 4.0. Your fiddle works as intended. – gchq Feb 01 '18 at 13:15
  • 1
    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. – gchq Feb 01 '18 at 15:46
  • 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 :-( – gchq Feb 01 '18 at 23:33
  • 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? – Arseniy Feb 04 '18 at 17:57
  • So far, no solution. When I get the chance will create a new project and update Nuget packages one at a time to see what breaks it. Did you create yours in VB or C#? – gchq Feb 04 '18 at 21:55

15 Answers15

75

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>
Arseniy
  • 889
  • 8
  • 12
63

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>
}
Jon Roberts
  • 2,262
  • 2
  • 13
  • 17
  • As @Suhani mentioned you should add null at actionlink extension. – erhan355 Oct 13 '18 at 20:58
  • 1
    The button on the Layout page should contain a span tag with the "navbar-toggler-icon" class – Doug Dekker Nov 10 '18 at 12:16
  • 1
    Thank you for supplying this! As a fix, _LoginPartial.cshtml
      nodes should use 'ml-auto' instead of 'mr-auto' to fully right-align the Register/Login buttons and/or username.
    – CodeBreaker Jul 26 '19 at 21:35
  • 1
    Thank you very much for this!!! Please note that mr-auto is now me-auto as @zim explains in this answer https://stackoverflow.com/questions/63948287/bootstrap-5-navbar-align-items-right – Guilder Jun 21 '21 at 05:24
8

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>
Sagi
  • 981
  • 11
  • 15
7

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>
David
  • 4,665
  • 4
  • 34
  • 60
Suhani
  • 81
  • 1
  • 5
7

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

Thys
  • 121
  • 1
  • 6
  • Thinking that the latest 3.x version would resolve this I tried 3.4.1. This had no effect. As suggested above, the solution is to use version 3.3.7. – Leigh Oct 06 '20 at 10:53
2

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.

szdrnja
  • 194
  • 2
  • 6
2

WORKING WITH MVC WebAPI PROJECT

File Name : _Layout.cshtml

  1. 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>
  1. 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.

Pishang Ujeniya
  • 176
  • 5
  • 13
0

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.

0

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>
  
kj007
  • 6,073
  • 4
  • 29
  • 47
Brendan Sluke
  • 857
  • 10
  • 11
0

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

Artorias2718
  • 575
  • 5
  • 11
0

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>
}
Artorias2718
  • 575
  • 5
  • 11
0

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.

0

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.

PrakashG
  • 1,642
  • 5
  • 20
  • 30
0

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.

enter image description here

<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>
smoore4
  • 4,520
  • 3
  • 36
  • 55
0

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.

Honza P.
  • 1,165
  • 1
  • 11
  • 12