Can't change bootstrap theme elements color

Question

It's my first time using a bootstrap theme with my ASP.net web application, thus I've been having some difficulties with the CSS editing.

I got this bootstrap template online, and in order to accommodate my needs I want to change the color of the footer div to another color. Here's the code in html

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

and here's the css

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

}

Basically, I wanna change the color of the div from #7cc4cc to #5DBCD2. When I run my page in google chrome and select the inspect element option the code supposedly works, but in the css properties backgroud: #7cc4cc is slashed out above the line background: #5DBCD2 (which is not slashed out) but the color of the div shown is still #7cc4cc. In short I can't change the CSS color properties of the theme for some reason. Any help would be greatly appreciated.

Answer 1

You could learn a lot by reading about CSS Specificity. CSS is about rules on top of rules, so what I think is happening, is that some rules are getting applied over your:

.footer_bottom { background: #5DBCD2; }

Check for any rules that have higher specificity and make this .footer-bottom declaration higher than that.

The !important solution in the other answers is not something you want to do. Over time these things are going to bite you in your ass, as they blow your specificity 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 the bootstrap css so you need to add !important to your background color change like so :

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