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

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>

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


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~