css - Not able to override Bootstrap properties in a particular div -

this block of code in html part

<header>     <div class="top_line"></div><br/>     <div class="container">        <div class="abcd">Über<span style="color:#2773ae">tech</span></div>        <div class="top_line"></div>     </div> </header> 

i using twitter bootstrap , have custom css file linked after bootstrap css files apply specific styles parts of page. here custom css file code:

.top_line {     background-color: #2773ae;     height: 5px; }  .abcd {     font-size:50px;      line-height:25px; } 

whenever try applying style abcd class inside container, default size of 14px , line-height of 20px mentioned in bootstrap body tag comes up. however, top_line class works fine. tried .container .abcd, .container>.abcd , many other things, still didn't font-size , line-height wanted achieve have given in css code. inline stylings work though. can please tell me going wrong?

thank you

you should verify depth of declaration made in boostrap css file sure write stronger rule abcd class.

another way use not recommended hacks such : !important , make sure declaration stronger.

for example :

.abcd {     font-size:50px !important;      line-height:25px !important; }