CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Ankur Sinha
Ankur Sinha

Reputation: 6677

Not able to override Bootstrap properties in a particular div

This is my block of code in the 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 am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code: 

.top_line {
    background-color: #2773AE;
    height: 5px;
}

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

Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?

Thank You

Upvotes: 0

Views: 1153

Answers (2)

Jeyindamix
Jeyindamix

Reputation: 26

You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.

Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.

for example :

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

Upvotes: 1

Gianfranco Lemmo
Gianfranco Lemmo

Reputation: 451

Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span

Upvotes: 0

Related Questions