Can Override Bootstrap CSS in ASP.NET MVC5 Application?

Question

I am relatively new to using ASP.NET MVC5. It is nice that Bootstrap is built in but it seems to be very abrasive to altering the CSS based on the Site.css file.

My style sheet (Site.css) is in the Content folder in my solution.

Similar questions are out there but those are the answers I have tries (show below and obviously having the file AFTER the bootstrap...)

I have had some success using just the inline CSS and jQuery but I want to be able to use my style sheet.

It seemed that switching from relying on the bundle to this line...

@Styles.Render("~/Content/css")

for the reference was better fit... but it STILL doesn't consistently update to my styling.

so then after some digging through old questions I found this...

<link href="@Url.Content("/~Content/Site.css")" rel="stylesheet" type="text/css" />

and it seems like one in a while it works but NOT consistently...

I thought at first it had to do with the strongly types bootstrap file with the elements getting more specific styling points, but even when experimenting with the strongest id/elementname/nesting combinations I could it STILL wouldn't work. (i want to do hovers and such, but even easy things like changing the text color don't work)

Is there some giant flaw in this strategy?

Is there something I'm missing?

To the best of my knowledge this shouldn't be a huge problem, I would appreciate it greatly for someone to help me out or at least tell me why I'm sooooo wrong.

Thanks.

Answer 1

You could update the style bundle, even remove all the bootstrap css and add yours. Same for the Javascript bundles.

https://www.tutorialsteacher.com/mvc/stylebundle-mvc

The include section listed in the bundle is the list of files that will be used for the specific bundle which you reference by name in your razor pages as you did in your example.

Answer 2

Just to make sure: there's nothing about ASP.Net/MVC etc that imposes anything about styles.

• You can use Bootstrap or not, or any other styling framework
• Bootstrap isn't "built in", it's just the default when an MVC application is scaffolded for you

That out of the way, you don't have to use Bootstrap if you don't want to.

• /App_Start/BundleConfig.cs - this is where you define what CSS and javascript frameworks, files you want to be bundled with your application. Modify (add/remove/etc) it to your needs.

Other than that, overriding CSS classes is pretty much the same as it is anywhere (nothing is imposed by the ASP.net framework).

Hth

Answer 3

Although the solution provided by EdSF is good it is still not very understandable for someone who has just started with mvc5. So I will try to explain it a little bit more.

Go to

/App_Start/BundleConfig.cs

this is the file where all your stylesheets are bundled.

bundles.Add(new StyleBundle("~/bundles/css").Include(
                  //"~/Content/css/bootstrap.min.css",
                     "~/Content/css/Site.css",
                  "~/Content/css/jquery-ui-1.10.4.min.css"));

comment out the line of bootstrap if you don't want to use it and add you css just like the above. But remember It will remove bootstrap completely and unless you have written you own bootstrap-ish stylesheet for responsive webpage design, you should keep it.

When your view page is rendered in the browser inspect the element that's design is not according to your stylesheet and check the class name on that element and override that class with your own stylesheet class and add !important tag on the style attribute so that it will not be overidden by anything else.

Try these steps. Good luck.

Answer 4

RESOLVED: what seemed to be the main issue was not clearing my cache between tests. Although this seems a little tedious, I was finally able to get some Styling in.

but there were 2 more things I tried (from other question on Stack-Overflow) which seemed to all combine to getting it working better. (though it would still be nice if changes consistently reloaded on refresh without restarting the app! (I run parallels so it takes quite a long time!)

ANYWAYS! The (3) changes I made that were most effective

1. Clearing the cache (so the browser is forced to re-render the script
2. Changing the name in the "Bundle_Config" from "site/css" to match "Site/css" (not positive why it is like this in the scaffold.. or if it matters...but it seemed to make communication with the file more consistent.
3. Adding another reference ( THIS HELPED THE MOST ) adding an additional stylesheet reference to the relative path aside from the built in "renderStyles" from the budleconfig that takes place in the _Layout.cshtml.

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

granted I still need to clear the cache once in a while and restart the app to see changes, I am at least able to change the styling...

thanks for the help everyone!