Trouble Overriding Bootstrap CSS
css, twitter-bootstrap
Solution
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.
Problem
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.