3

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 ?

Darkmouse
  • 1,941
  • 4
  • 28
  • 52
AdityaKapreShrewsburyBoston
  • 1,143
  • 2
  • 16
  • 37
  • 1
    When you inspect in the browser, what is the *actual* selector that sets the `margin-top`? It is probably more specific in some way than your custom css. – Jeroen Jan 16 '15 at 16:53
  • Are you calling your over-riding styles after the bootstrap ones are being added? Is your stylesheet called after the Bootstrap called? – Alan Dunning Jan 16 '15 at 16:53
  • possible duplicate of [How to overwrite styling in Twitter Bootstrap](http://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap) – ryanyuyu Jan 16 '15 at 16:53
  • @Jeroen the actual selector that loads is from bootstrap.min.css – AdityaKapreShrewsburyBoston Jan 16 '15 at 16:54
  • Hehe, I get that. But what is the *selector*? Is it something like `body .modal .modal-footer`? That would be way more specific than your `.my-modal-footer-override`. – Jeroen Jan 16 '15 at 16:56
  • @Alan its called after loading bootstrap.min.css – AdityaKapreShrewsburyBoston Jan 16 '15 at 16:56
  • @Jeroen its modal.modal-dialog.modal-content.modal-body – AdityaKapreShrewsburyBoston Jan 16 '15 at 16:58
  • If it doesn't works, it most probably because you had bootstrap after your style, and both rules has the same [weight](http://css-tricks.com/specifics-on-css-specificity/). You need to either way : 1/ change the order of your css, 2/ change your rule to ```.modal-footer.my-modal-footer-override```, 3/ Add ```!important``` after ```0px```. I advise 1 or 2. – Gregoire D. Jan 16 '15 at 16:58
  • If none of what we tell yet does the trick, could you copy/pasta part of your html page and css on a fiddle ? Because it should definitely work. – Gregoire D. Jan 16 '15 at 17:03

3 Answers3

2

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.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
0

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.

Joe W
  • 2,773
  • 15
  • 35
0

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.

Preben
  • 1,277
  • 2
  • 11
  • 20