Twitter Bootstrap overwriting css

Question

I am using Twitter Bootstrap with Wordpress. Bootstrap outputs the following css in bootstrap.css

.navbar-inverse .navbar-inner {
    background-color: #1b1b1b;
    background-image: -moz-linear-gradient(top, #222222, #111111);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
    background-image: -webkit-linear-gradient(top, #222222, #111111);
    background-image: -o-linear-gradient(top, #222222, #111111);
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

If I want to override this code in my style sheet, do I have to specify every class element? For example, if i want the nav bar to be totally black - no gradients etc - is there a quick way to do it without copying every class attribute from above and changing every hex value to #000000?

Why don't you just overwrite/change the bootstrap CSS? This is just a template, starting point. If you still need to overwrite, have a look at: http://stackoverflow.com/questions/5902858/order-of-prioritization-when-using-multiple-contradictory-css-files — Daniel, May 14 '13 at 19:29
I understood that keeping the base bootsrap.css in tact was preferred in terms of future updates? — lowercase, May 14 '13 at 20:08

score 1 · Answer 1 · answered May 14 '13 at 19:32

You should be able to overwrite individual background properties by using the combined property of just background. For example background: black; should overwrite all background-related properties above.

But be weary of specificity battles. Your CSS selector should be more specific than this one to ensure that you won't have undesired conflicts.

kyle.stearns · Accepted Answer · 2013-05-14T19:44:28.887

I believe this would be good enough to do the following to override the background properties baked into Twitter Bootstrap:

 .navbar-inverse .navbar-inner { background: none }

The background property is considered short hand so that simple declaration should work properly.

The background property's shorthand usage is as such:

 .navbar-inverse .navbar-inner { background:#000 url('/path/to/image.png') no-repeat 100px 100px scroll; }

This one simple property can declare and override background-color, background-image, background-repeat, background-position, background-attachment, and background-clip all at once!

Also!! It may be a good idea to make the selector within your stylesheet a bit more specific to ensure that you don't run into specificity issues.

Here's a jsfiddle example: http://jsfiddle.net/f5Yyj/1/

That worked great. Exactly what I was trying to ask for. ha. Thanks. — lowercase, May 14 '13 at 20:10

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

To overwrite previous CSS, either write an equally strong selector (as you suggest in the question), a stronger selector (IDs take priority over multiple classes), or add !important to the selector.

Example of !important:

.navbar-inner { background: #000 !important; }

While convenient, overusing !important will cause sustainability problems. Try to avoid using it whenever possible.

The absolutely best solution is to change the Bootstrap CSS directly, but if you're unable to do that then I'd recommend writing an equally strong selector.

score 0 · Answer 4 · answered Aug 20 '13 at 02:50

All these tips will work, avoid using !important this is a better approach. Include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.

For example, if this is how you include CSS in your <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

put the property in the site-specific.css

#navbar {
    color: #000000;
}

Twitter Bootstrap overwriting css

4 Answers4

Example of !important: