CODEWITHSUNDEEP
csstwitter-bootstrap
LeRamme
LeRamme

Reputation: 39

Override certain bootstrap property

Let's say I have this :

@media (min-width: 576px) {
  #projects-edit-middle-column .equal-columns-wrapper .equal-columns {
    width: 50%;
    padding-right: 25px; } }

I'm using this in a container:

<div class="equal-columns">

I want to keep using this bootstrap class, but also to override the padding-right property to other value. How can I do that ?

Upvotes: 0

Views: 234

Answers (1)

Dishant Bisht
Dishant Bisht

Reputation: 51

.equal-columns{
   padding-right:10px !important;
}

But make sure, this div should be having some extra id. So that the property of .equal-columns will not affect others. Because you are changing the value of padding-right in .equal-columns for permanently.

So, to change the padding-right of this div only. You have to write a id like "abc". And priority of id(#) is bigger than class(.). Then your code will be like:-

 #abc.equal-columns{
    padding-right:10px;
 }

When you are writing id in front of class, then you don't have write important after the property value.

Upvotes: 1

Related Questions