Trouble Overriding Bootstrap CSS

Question

I have searched the net for a way to override bootstraps CSS but have yet to have it work for me. I am trying to change the default navbar color without editing the bootstrap.css file.
I have tried putting the following in the head after loading bootstrap.css:

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

This did not work so I tried putting it in its own CSS file and then loading that stylesheet like so:

bootstrapOverload.css

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css">
<link rel="stylesheet" href="Content/bootstrapOverload.css">

When that didn't work I tried adding a custom class to element

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

bootstrapOverload.css

.navbar-override {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0);
}

Am I doing something wrong? I would really love to learn how to do this the right way if possible.

In addition to the answers below this link http://www.nzwhost.com/article/understanding-css-hierarchy may help — will-hart, Sep 30 '12 at 00:13
This is very similar to [change navbar color in twitter bootstrap 2 0 4](http://stackoverflow.com/questions/11196638/change-navbar-color-in-twitter-bootstrap-2-0-4) which has a very comprehensive solution. — everette, Jan 23 '13 at 18:57

MitulP91 · Answer 1 · 2015-03-08T02:56:00.400

Have you tried adding the !important tag on each CSS line in order to tell the element to override bootstrap?

Something like this:

.navbar-override {
    background-color: #006633 !important;
    background-image: -moz-linear-gradient(top, #006633, #006633) !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important;
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important;
    background-image: -o-linear-gradient(top, #006633, #006633) !important;
    background-image: linear-gradient(to bottom, #006633, #006633) !important;
    border-color: #006633 !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0) !important;
}

Typically not the best way to do this, but I think it should work.

Perfect! This is what i was looking for. – Gaurav Sharma May 14 '18 at 09:23 — Gaurav Sharma, May 14 '18 at 09:23

score 3 · Answer 2 · answered Sep 29 '12 at 23:29

3

To overload css you need to either be later in the code, or more specific then the css you are trying to overload.

It may be possible to just add body in front of .navbar-inner so that it states body .navbar-inner just so that it is more specific, or maybe div.navbar-inner, the best would be to have an id there somewhere.

If you are selecting it as specific as is in the bootstrap.css, then I think you css is not loaded after the bootstrap as you think. Verify what is selected with a tool like Chromes development tool or Firefox's firebug.

answered Sep 29 '12 at 23:29

Krycke

3,106
1
17
21

In this case, there's no need to add unnecessary selectors – Ruan Mendes Sep 30 '12 at 00:27
I just corrected some errors and tried adding body, div, and an id but it still doesn't work. I also deleted my cache because I didn't know if that was preventing me from seeing the results for some reason. When I inspect element with Chrome it is saying that it's still using bootstrap.css but when I uncheck all the values it displays the color from my style sheet. I have my style sheet placed after bootstrap.css in my code. – Bacon Sep 30 '12 at 01:09
What selector are `bootstrap.css` using for your element? – Krycke Sep 30 '12 at 10:46

score 3 · Answer 3 · answered Sep 29 '12 at 23:29

3

There is a typo in your CSS:

background-image: -mox-linear-gradient(top, #006633, #006633);

I think it should be:

background-image: -moz-linear-gradient(top, #006633, #006633);

If you type a mistake in CSS, its stop interpreting the rest, so no override for you.

answered Sep 29 '12 at 23:29

Mark

6,762
1
33
50

Awesome. I didn't know it stopped rendering after one mistake. To be sure I got it right this time I copied the css from bootstrap.css into my own style sheet and changed the color values. Still no luck unfortunately. – Bacon Sep 30 '12 at 01:05

score 3 · Answer 4 · answered Mar 16 '13 at 06:12

Just spent most of the day trying to change the navbar color : [

I think the problem is .navbar-inverse

Your separate .css file should include something like this then the color will change:

.navbar-inverse .navbar-inner {
background-color: #586214;
background-image: none;
}

score 1 · Answer 5 · edited Nov 04 '19 at 23:55

you can override the bootstrap defaults by changing the LESS variables.

https://getbootstrap.com/2.0.1/less.html#variables

//Navbar

@navbarBackground: @Color1;
@navbarBackgroundHighlight: @Color1;
@navbarBrandColor: #FFFFFF;
@navbarLinkColor: #FFFFFF;
@navbarLinkColorHover: #FFFFFF;
@navbarLinkColorActive: #FFFFFF;
@navbarInverseBackground: #FFFFFF;
@navbarInverseBackgroundHighlight: #FFFFFF;
@navbarInverseBorder: #FFFFFF;
@navbarInverseLinkColorHover: @Color7;
@navbarInverseLinkColorActive: @Color11;
@navbarInverseLinkColor: @Color1;

we should also add that after changing the less files the css must be recompiled (or interpreted by lessjs) — Mangiucugna, Aug 18 '13 at 16:05

score 0 · Answer 6 · answered Feb 15 '18 at 10:44

0

Solve your Problem by Copying the CSS-Class and rename it. Then use this class :)

I know its Boosted but look atleast it works

Example:

.drop-down {...}     /* is from bootstrap */
.drop-down-new {...} /* Your new Class that works*/

answered Feb 15 '18 at 10:44

Dxg125

51
1
7

Trouble Overriding Bootstrap CSS

6 Answers6