Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 453
minecraftplayer1234 Avatar asked Jul 08 '26 15:07

minecraftplayer1234


1 Answers

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.

like image 144
Matt G Avatar answered Jul 10 '26 04:07

Matt G



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!