ASP.NET web application cannot display things properly with custom bootstrap

Question

I have just created asp.net mvc application. I wanted to change the "theme" of the site, to I've got to bootswatch and selected darkly theme. Then I've added it to Content folder and edited App_Start\BundleConfig.cs changing:

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

to:

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

It worked. But with the default theme the site looks like this:

And with darkly bootstrap it doesn't show the Home About Contact Register Log in tabs:

I had to click that little button which the arrow is pointing to show the list with those.

I tried it in Google Chrome, Firefox and Microsoft Edge. And I tried other files like Lumen or Superhero. Still no effect. On the video from which I am learning all of this: https://www.youtube.com/watch?v=E7Voso411Vs, the author of it used Lumen and it worked for him.

Can you see anything I am doing wrong?

@Edit. This is my solution explorer:

And this is my navbar section:

I checked those things using Inspect and here they differ:

The best way to find out what's wrong is to use google developer tools. Then you can see which css-styles are applied and which not. — Aedvald Tseh
– Aedvald Tseh, Commented Jan 4, 2018 at 5:16
Hmm, dunno how to do that. I can only tell that the page sources look exactly the same, only the path to bootstrap file is different — minecraftplayer1234
– minecraftplayer1234, Commented Jan 4, 2018 at 5:26
your files are not properly loaded you can share you solution explorer screenshot or check console tab in google chrome. — Muhammad Asad
– Muhammad Asad, Commented Jan 4, 2018 at 5:48
Check Out Navbar Section From _Layout.cshtml file in ~/Views/Shared folder. Also U need to know how to use Chrome Developer Tools. It's Must for a Web Developer. Use [this ](developer.chrome.com/devtools) link as reference to learn it. — dip4k
– dip4k, Commented Jan 4, 2018 at 5:55
I've added the solution explorer and navbar section screenshots to the question. Btw I am not a Web Developer :D I am just trying out to make my program (which is a genetic algorithm for TSP) show its output on the web to make it look nicer — minecraftplayer1234
– minecraftplayer1234, Commented Jan 4, 2018 at 10:57

Matt G · Accepted Answer · 2018-03-24 22:02:59Z

3

Based on what I can piece together from this Stack Overflow question, and this page from Booststrap, the issue is that Bootstrap 4 includes some 'breaking changes'. Your MVC template is built for Bootstrap 3, so even upgrading the Bootstrap version for your porject won't fix it, as the classes you need to use have changed.

You have two options. One is to update your Layout file, you can look at this section of the Bootstrap page or this Stack Overflow question for guidance. I also found it really helpful to click on the '< >' button on the Bootswatch example page to see the code for the navbar.

Alternatively for the really easy approach you could just use a Booststrap version 3 theme instead. This should get you up and running.

edited Mar 24, 2018 at 22:02

answered Mar 24, 2018 at 21:34

Matt G

6629 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET web application cannot display things properly with custom bootstrap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related