2

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:

enter image description here

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:

enter image description here

And this is my navbar section:

enter image description here

I checked those things using Inspect and here they differ:

enter image description here

minecraftplayer1234
  • 2,127
  • 4
  • 27
  • 57
  • 1
    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 Jan 04 '18 at 05: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 Jan 04 '18 at 05:26
  • your files are not properly loaded you can share you solution explorer screenshot or check console tab in google chrome. – Muhammad Asad Jan 04 '18 at 05: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 ](https://developer.chrome.com/devtools) link as reference to learn it. – dip4k Jan 04 '18 at 05: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 Jan 04 '18 at 10:57
  • Thank you for documenting this in so much detail, I have exactly the same problem. By the way, the theme you are using is for Bootstrap 4, and you may find your project is using 3 by default. Check the version in NuGet package manager and upgrade if necessary. This didn't fix the problem for me, but may work for you. If I find a solution I'll come back here with it. – Matt G Mar 24 '18 at 21:22

1 Answers1

2

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.

Matt G
  • 444
  • 5
  • 23