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:

1. Installed Bootstrap: Install-Package bootstrap - Version 4.0.0
2. Installed jQuery: Install-Package jQuery -Version 3.2.1
3. 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:

1. Selected the Minty theme and downloaded and Copied the bootstrap.css styles
2. Called the file minty.bootstrap.css
3. Added the minty.bootstrap.css to Content folder
4. 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

Answer 1

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>

Answer 2

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