Changing Bootstrap Themes in ASP.NET MVC display issues

Question

I have an MVC project that I have changed the default Bootstrap theme to Bootswatch - Cosmos, however it is giving me the attached result for the Navbar.

Header display issue image

Initially I was running Bootstrap 3.0 and was using Bootswatch 3.0 to make sure there was no version conflict.

I have taken the following steps:

Add cosmos-boostrap.css and cosmos-boostrap.min.css to the content folder

References the css file in my BundleConfig.cs:

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

Check my _Layout.cshtml for Styles reference:
```
@Styles.Render("~/Content/css")
```
Upgraded Bootstrap to v4 and tried Cosmos v4, but still got the same result.

It appears just to be an issue with the Navbar, because the other Cosmos fonts and buttons seem to be displaying OK. I have also tested some other Bootstrap themes, with the same outcome for the Navbar.

Any help would be appreciated.

EDIT: HTML for Navbar as below:

<body>
<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>
            @Html.ActionLink("Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - TEST IT SOLUTIONS</p>
    </footer>
</div>

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

WebDevBooster WebDevBooster · Accepted Answer · 2018-02-02T04:38:35

Bootstrap 4 is almost a complete rewrite of Bootstrap 3 and therefore, both versions are completely incompatible with each other.

So, a Bootstrap theme designed for Bootstrap 3 must be manually migrated to Bootstrap 4. Because both versions are so different, there's no easy or automated way to do it. Any attempt to automate the migration will always leave plenty of stuff that has to be adjusted manually.

P.S. If you just want to fix the header, post the complete code snippet (HTML output) for that in your question i.e. post your current code there.

Edit:

Based on the code snippet you posted now, one thing is clear: Your theme was NOT a Bootstrap 4 theme and is not compatible with Bootstrap 4. What you have there is Bootstrap 3 code.

Here's what a Bootstrap 4 code would look like for that particular navbar (you need to adjust that for ASP.NET code as needed; click the "run code snippet" button below to see it in action):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">BrandName</a>
        <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">
                <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="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- End of navbar -->

<div style="padding:1000px 0;">hi</div>

Changing Bootstrap Themes in ASP.NET MVC display issues

1 Answers

Edit: