ASP.NET MVC5 Bootstrap CSS Messing Up Navigation?

Question

Am currently new to ASP.NET and am currently in process of learning how to change theme.

What I've done:

1. With VS2017, I started a new ASP.NET Web Application. This is the default theme before i changed the CSS.

2. I got a theme from : https://bootswatch.com/lumen/ and replaced Content/bootstrap.css with the new theme code as ive been instructed to by multiple tutorials.

After doing those steps, my header navigation messes up and suddenly converts into a ugly looking dropdown menu?

Below is what it should actually look like.

Could someone tell me where I went wrong, or if ive missed any steps? Im following instructions from a video tutorial to the T and ive not missed any steps and am unable to achieve the same output. The only difference is the instructor is using VS2013.

Answer 1

You're watching the course on ASP.NET MVC 5 made by Mosh Hamedani I presume. You're downloading the latest version of the Bootswatch theme which is meant for Bootstrap 4. The default MVC 5 template uses Bootstrap 3.

You need to download this version of the Lumen theme: "https://bootswatch.com/3/lumen/"

---

Alternatively you could upgrade to Bootstrap 4 by updating your Bootstrap NuGet package.

Answer 2

If ever you can't update the bootstrap nugget. You can change class in the div tag in the _Layout.cshtml inside the Shared folder. What I did is I change the code to this syntax.

<div class="navbar navbar-expand navbar-fixed-top">

It was shown as <div class="navbar navbar-inverse navbar-fixed-top">

change the class to navbar navbar-expand navbar-fixed-top, it will expand all the menu in the navbar cause it was just hidden.

Answer 3

Another way to download the Bootstrap 3 version of the Lumen theme is via the Bootswatch GitHub repository.

URL for CSS file: https://raw.githubusercontent.com/thomaspark/bootswatch/v5/docs/3/lumen/bootstrap.css

At the time of writing, the Bootswatch home page has the link to the GitHub repository along the top, directing you to the URL below.

URL for Bootswatch GitHub repository: https://github.com/thomaspark/bootswatch/