CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
iOi
iOi

Reputation: 413

Overriding bootstrap styles

I have a bootstrap.min.css and the following div. 

<div class='jumbotron'> 
</div>

I am overriding this class using a custom css file. 

.jumbotron{
    background: green url(../img/city.jpg) no-repeat top left;
}

But the contents of the class jumbotron are not changing. I know the css is included properly, because it works for other divs that share no name with bootstrap. How do I solve this problem?

Upvotes: 1

Views: 328

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362270

Make sure the .jumbotron CSS override follows the bootstrap.min.css in your HTML file.

Demo: http://bootply.com/tbFqSQQcOi

Upvotes: 0

Alex
Alex

Reputation: 9031

Is your custom CSS file called after the bootstap.min.css. Maybe the bootstrap.min.css has more importance:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Example from above link:

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 /
li {} / a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 /
li:first-line {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 /
ul li {} / a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 /
ul ol+li {} / a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + [rel=up]{} / a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 /
ul ol li.red {} / a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 /
li.red.level {} / a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 /
#x34y {} / a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 /
style="" / a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

Upvotes: 1

James Duffy
James Duffy

Reputation: 1387

Inspect the element in Chrome's developer tools (or Firefox has something similar, don't know what they call it).

Right click > Inspect Element

Now look at the CSS styles to the right. Do you see your custom style somewhere in the list? You may have to scroll down a bit.

If it's not in the list, that means your CSS file is not getting included properly or the element name is misspelled, so your styles are not being applied.

If it is in the list but crossed off, that means one of bootstrap's styles is probably overriding it. You can make your styles take precedence over bootstrap's styles by using a more specific selector

Upvotes: 2

Related Questions