CODEWITHSUNDEEP
csstwitter-bootstrap
Bacon
Bacon

Reputation: 823

Trouble Overriding Bootstrap CSS

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.

Upvotes: 6

Views: 27123

Answers (7)

Manjeet Kumar
Manjeet Kumar

Reputation: 1

First try to add bootstrap script in head section then add your own css file.

Upvotes: 0

actraub
actraub

Reputation: 123

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;

Upvotes: 1

Dxg125
Dxg125

Reputation: 107

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*/

Upvotes: 0

MitulP91
MitulP91

Reputation: 1315

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.

Upvotes: 10

Willy Nilley
Willy Nilley

Reputation: 31

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;
}

Upvotes: 3

Mark
Mark

Reputation: 6855

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.

Upvotes: 3

Krycke
Krycke

Reputation: 3176

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.

Upvotes: 3

Related Questions