2242

Overriding bootstrap styles

Question:

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?

Answer1:

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 <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">more specific selector</a>

Answer2:

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

<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade" rel="nofollow">http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade</a>

Example from above link:

<blockquote>

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

</blockquote> <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.

Answer3:

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

Demo: <a href="http://bootply.com/tbFqSQQcOi" rel="nofollow">http://bootply.com/tbFqSQQcOi</a>

Recommend

  • Creating grails binary plugin results in jar file wich contains all groovy files with comments
  • Java NoClassDefFoundError when running jar containing library jar
  • How can I see Python's __builtins__ source code?
  • How can I fill all space of a div 100% with 3 divs with the same size?
  • QTP UFT Unable to find row count from table
  • how to display   in Mozilla using XSL.
  • How does ActiveSupport do month sums?
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • Error in installing package: fatal error: stdlib.h: no such file or directory
  • Is there a way to save the selected text and highlight it again once the page is refreshed?
  • Remove changes from one element when event occurs on another element?
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • Is playing sound in Javascript performance heavy?
  • C: Incompatible pointer type initializing
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Asynchronous UI Testing in Xcode With Swift
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • Why is an OPTIONS request sent to the server?
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • How would I use PHP exceptions to define a redirect?
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Join two tables and save into third-sql
  • Javascript convert timezone issue
  • How to model a transition system with SPIN
  • Weird JavaScript statement, what does it mean?
  • Large data - storage and query
  • ORA-29908: missing primary invocation for ancillary operator
  • WOWZA + RTMP + HTML5 Playback?
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Django query for large number of relationships
  • Converting MP3 duration time