Unable to change the color of bootstrap theme elements

Question

This is my first time using the bootstrap theme with my ASP.net web application, so I had some difficulty editing CSS.

I got this boot template online, and to satisfy my needs, I want to change the footer color to a different color. Here is the code in html

<div class="footer_bottom"> <div class="copy"> <p>Copyright &copy; 2014</p> </div> </div> 

and here css

 .footer_bottom { padding: 2em 0; /*background: #7cc4cc;*/ background: #5DBCD2; 

}

Basically, I want to change the color of the C # 7cc4cc div to # 5DBCD2. When I launch my page in google chrome and select the check item option, the code may work, but in the css backgroud properties: # 7cc4cc is cut off over the line background: # 5DBCD2 (which is not crossed out), but the color The div shown is still # 7cc4cc. In short, I cannot change the color properties of the CSS theme for some reason. Any help would be greatly appreciated.

Answer 1

You can learn a lot by reading CSS Specifics . CSS refers to rules on top of rules, so it seems to me that some rules apply to yours:

 .footer_bottom { background: #5DBCD2; } 

Check the rules with higher specificity and make this .footer-bottom declaration higher.

The !important solution in the other answers is not what you want to do. Over time, these things are going to bite you in your ass, as they carry your identity through the roof.

Answer 2

Use !important to override bootstrap styles:

  .footer_bottom { padding: 2em 0 !important; background: #5DBCD2 !important; } 

Answer 3

You are trying to override bootstrap css, so you need to add !important to the background color change as follows:

 .footer_bottom { padding: 2em 0 !important; /*background: #7cc4cc;*/ background: #5DBCD2 !important;