CODEWITHSUNDEEP
asp.net-mvccsstwitter-bootstrapasp.net-mvc-5
Doug Peters
Doug Peters

Reputation: 529

How to override bootstrap styles?

I am trying to change simple CSS properties in the default theme that comes with a new ASP.NET MVC 5 application in Visual Studio 2013. In particular I need to change the navigation menu's background color.

I have located via Firebug this property and its new value should be:

.navbar-inverse { background-color: #5B80A5}

I initially attempted to add the override CSS line in Site.css because I noticed these lines in BundleConfig.cs:

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

However the nav menu's background color didn't change.

I then searched for .navbar-inverse in my solution and the search returned:

Web\Content\bootstrap-theme.css(240):.navbar-inverse {
Web\Content\bootstrap-theme.css(249):.navbar-inverse .navbar-nav > .active > a {
Web\Content\bootstrap-theme.css(259):.navbar-inverse .navbar-brand,
Web\Content\bootstrap-theme.css(260):.navbar-inverse .navbar-nav > li > a {
Web\Content\bootstrap-theme.css.map(1):{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes
Web\Content\bootstrap-theme.min.css(5): */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 r
Web\Content\bootstrap.css(4190):.navbar-inverse {
Web\Content\bootstrap.css(4194):.navbar-inverse .navbar-brand {
Web\Content\bootstrap.css(4197):.navbar-inverse .navbar-brand:hover,
Web\Content\bootstrap.css(4198):.navbar-inverse .navbar-brand:focus {
Web\Content\bootstrap.css(4202):.navbar-inverse .navbar-text {
Web\Content\bootstrap.css(4205):.navbar-inverse .navbar-nav > li > a {
Web\Content\bootstrap.css(4208):.navbar-inverse .navbar-nav > li > a:hover,
Web\Content\bootstrap.css(4209):.navbar-inverse .navbar-nav > li > a:focus {
Web\Content\bootstrap.css(4213):.navbar-inverse .navbar-nav > .active > a,
Web\Content\bootstrap.css(4214):.navbar-inverse .navbar-nav > .active > a:hover,
Web\Content\bootstrap.css(4215):.navbar-inverse .navbar-nav > .active > a:focus {
Web\Content\bootstrap.css(4219):.navbar-inverse .navbar-nav > .disabled > a,
Web\Content\bootstrap.css(4220):.navbar-inverse .navbar-nav > .disabled > a:hover,
Web\Content\bootstrap.css(4221):.navbar-inverse .navbar-nav > .disabled > a:focus {
Web\Content\bootstrap.css(4225):.navbar-inverse .navbar-toggle {
Web\Content\bootstrap.css(4228):.navbar-inverse .navbar-toggle:hover,
Web\Content\bootstrap.css(4229):.navbar-inverse .navbar-toggle:focus {
Web\Content\bootstrap.css(4232):.navbar-inverse .navbar-toggle .icon-bar {
Web\Content\bootstrap.css(4235):.navbar-inverse .navbar-collapse,
Web\Content\bootstrap.css(4236):.navbar-inverse .navbar-form {
Web\Content\bootstrap.css(4239):.navbar-inverse .navbar-nav > .open > a,
Web\Content\bootstrap.css(4240):.navbar-inverse .navbar-nav > .open > a:hover,
Web\Content\bootstrap.css(4241):.navbar-inverse .navbar-nav > .open > a:focus {
Web\Content\bootstrap.css(4246):  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
Web\Content\bootstrap.css(4249):  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
Web\Content\bootstrap.css(4252):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
Web\Content\bootstrap.css(4255):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
Web\Content\bootstrap.css(4256):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
Web\Content\bootstrap.css(4260):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
Web\Content\bootstrap.css(4261):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
Web\Content\bootstrap.css(4262):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
Web\Content\bootstrap.css(4266):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
Web\Content\bootstrap.css(4267):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
Web\Content\bootstrap.css(4268):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
Web\Content\bootstrap.css(4273):.navbar-inverse .navbar-link {
Web\Content\bootstrap.css(4276):.navbar-inverse .navbar-link:hover {
Web\Content\bootstrap.css(4279):.navbar-inverse .btn-link {
Web\Content\bootstrap.css(4282):.navbar-inverse .btn-link:hover,
Web\Content\bootstrap.css(4283):.navbar-inverse .btn-link:focus {
Web\Content\bootstrap.css(4286):.navbar-inverse .btn-link[disabled]:hover,
Web\Content\bootstrap.css(4287):fieldset[disabled] .navbar-inverse .btn-link:hover,
Web\Content\bootstrap.css(4288):.navbar-inverse .btn-link[disabled]:focus,
Web\Content\bootstrap.css(4289):fieldset[disabled] .navbar-inverse .btn-link:focus {
Web\Content\bootstrap.css(6207):.navbar-inverse { background-color: #F7931A}
Web\Content\bootstrap.css(6208):.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navba
Web\Content\bootstrap.css(6209):.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.ope
Web\Content\bootstrap.css(6212):.navbar-inverse { background-image: none; }
Web\Content\bootstrap.css(6214):.navbar-inverse { border-color: #BD7014}
Web\Content\bootstrap.css(6215):.navbar-inverse .navbar-brand { color: #FFFFFF}
Web\Content\bootstrap.css(6216):.navbar-inverse .navbar-brand:hover { color: #9E601B}
Web\Content\bootstrap.css(6217):.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
Web\Content\bootstrap.css(6218):.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FDFFF7}
Web\Content\bootstrap.css(6219):.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.op
Web\Content\bootstrap.css(6220):.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
Web\Content\bootstrap.css(6223):.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF}
Web\Content\bootstrap.css(6224):.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
Web\Content\bootstrap.css(6225):.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF}
Web\Content\bootstrap.css(6226):.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
Web\Content\bootstrap.css.map(1):{"version":3,"file":"bootstrap.css","sources":["bootstrap.css","less/normalize.less","less/print.less","l
Web\Content\bootstrap.min.css(5): *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-s

I added the custom CSS line at the end of each of the above files but still, nothing happened. I rebuilt the project each time, cleared the cache in my browser, but nothing changed.

Any idea of how to override default boostrap styles? It's driving me nuts!

Similar questions that didn't really help:

Overriding bootstrap styles, How to override bootstrap input box style in table?, Cant override bootstrap

Upvotes: 2

Views: 16237

Answers (4)

Philip Lindsay
Philip Lindsay

Reputation: 11

_layout.cshtml CSS order

If you place the CSS reference before the bootstrap, it will make the custom CSS priority over the bootstrap. If you look I have the site.css reference above the bootstrap.min.css reference. This is in the Shared/_Layout.cshtml file.

Upvotes: 1

Ahmed
Ahmed

Reputation: 63

Delete the bootstrap.min.css or bootstrap.css. Similar question here CSS changes on MVC App not working

Upvotes: 0

Subrata
Subrata

Reputation: 61

File Name is not valid - use "Site.css" not "site.css". I also had this issue and resolved it this way without any other change...

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

Upvotes: 6

easwee
easwee

Reputation: 15915

Make your custom class that contains your styles for .navbar-inverse class more specific than bootstrap's class. You can add a class to your <body> tag and use that to prefix your custom overrides.

.myCustomStyle .navbar-inverse

If you can't edit your HTML you can use the obvious tags that every html document has:

body .navbar-inverse

will also make your styles more specific, but for code readability rather use the first approach.

Than you don't have to worry any more on where your file is placed since CSS specificity will always override bootstraps classes + you can always be sure that it is your class by it's name prefix, which makes further debugging much more easier.

Upvotes: 2

Related Questions