CSS Class doesn't work UNLESS listed twice in the css, why?

Question

I am trying to override a bootstrap class specifically: .container

I have created a CSS file which I load AFTER Bootstrap.min.css. The class in my css file is:

    .container {
   background-color: #f2f2f2 !important;
   border-left: 1px solid #669933 !important;
   border-right: 1px solid #669933 !important;
}

This does nothing, BUT if I make my CSS file this:

.container {
   background-color: #f2f2f2 !important;
   border-left: 1px solid #669933 !important;
   border-right: 1px solid #669933 !important;
}
.container {
   background-color: #f2f2f2 !important;
   border-left: 1px solid #669933 !important;
   border-right: 1px solid #669933 !important;
}

It then works! The class is identical, but listed twice. Why does this work only when listed twice and what am I doing wrong?

Try these best practices http://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css — Phreak, Feb 20 '15 at 02:08
What is the best way for me to provide you with an example? Thanks. — Cadell, Feb 20 '15 at 04:39

score 0 · Answer 1 · answered Feb 20 '15 at 11:39

0

Css always taking the first class property, so try to load first.

answered Feb 20 '15 at 11:39

Akhil Namboothiri

184
2
13

CSS Class doesn't work UNLESS listed twice in the css, why?

1 Answers1