无法覆盖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.

Answer 2

Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.

Answer 3

Have you tried this?

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

Using !important before the ";" will give this rule more weight than the bootstrap css.

You can add that inside yout HTML using ..css.. in the head, or in a new css document.