Unable to override bootstrap css

Question

I am trying to override the following found in the bootstrap class of "modal-footer"

margin-top: 15px;

I have the following HTML code that does this:

<div class="modal-footer my-modal-footer-override"></div>

and the following custom css :

.my-modal-footer-override {
    margin-top: 0px
}

But this does not work. Any suggestions ?

Answer 1

You could try a more specific selector. This could do the trick

.modal-footer.my-modal-footer-override {
   margin-top: 0px;
}

Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.

If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.

The important! declaration could be used as a dirty hack, but I would advise against it.