ASP.NET-MVC5 - Why would Bootstrap v4 themes not show components correctly?

Question

I have a brand new ASP.Net MVC5 application. I wanted to change the default theme to Minty theme which is for Bootstrap Version 4. However, after following the below steps the theme has messed up and not showing components correctly such as Nav bar. Can anyone guide me how to install the latest themes from Bootswatch.

Since It was a brand new ASP.Net MVC application. I did the following:

Installed Bootstrap: Install-Package bootstrap - Version 4.0.0
Installed jQuery: Install-Package jQuery -Version 3.2.1
Installed Popper.js: Install-Package popper.js -Version 1.12.9

After installing the above. I did the following steps to try to change the default theme:

Selected the Minty theme and downloaded and Copied the bootstrap.css styles
Called the file minty.bootstrap.css
Added the minty.bootstrap.css to Content folder
Updated the bundle to target the new Minty theme in the folder App_Start -> BundleConfig.cs

The BundleConfig.cs file:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js",
       "~/Scripts/respond.js"));

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

_Layout.cshtml file:

 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")

Then built the project to check the changes but the navigation bar was not as expected:

Thank you

score 16 · Accepted Answer · edited Feb 28 '19 at 17:08

yes you have to remove the nav div in layout page and put this

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

An explanation would be handy, could you explain how your nav div differs and what the issue is? — Matt G, Mar 24 '18 at 21:24

score 4 · Answer 2 · answered Apr 02 '18 at 13:27

for future reference, I had similar issue with the navbar and had to change the layout page to match the information provided by Bootstrap 4.0 document link below:

https://getbootstrap.com/docs/4.0/components/navbar/

Edit: Also, I had to replace all my @Html.ActionLink to <a class="nav-link" href="@Url.Action("Index", "Views")">Navbar Item</a> to make it work like how it was before I upgraded my Bootstrap

score 4 · Answer 3 · answered Dec 28 '18 at 00:38

The navbar problem is due to the fact that Bootswatch(https://bootswatch.com/) has now updated to Version 4, and MVC still uses Bootstrap Version 3. So what you need to do is go to this website: https://bootswatch.com/3/ and redo the steps you did.

It works for me~

score 2 · Answer 4 · answered Jun 06 '19 at 18:20

The navbar problem is that MVC by default still uses Bootstrap Version 3, when you upgrade your nuget package to bootstrap Version 4, the code is rewritten and changed to another classes.
Here's some little explanation: Navbar - Migrating to V4 * Bootstrap

The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization. Responsive navbar behaviors are now applied to the .navbar class via the required .navbar-expand-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. .navbar-default is now .navbar-light, though .navbar-dark remains the same.

I modify the default template _Layout.cshtml to works with the Navbar in Bootstrap v4.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <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>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link active" })</li>
            <li class="nav-item">@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</li>
            <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</li>
        </ul>
    </div>
</nav>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

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

ASP.NET-MVC5 - Why would Bootstrap v4 themes not show components correctly?

4 Answers4

Linked