CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-selectors
AdityaKapreShrewsburyBoston
AdityaKapreShrewsburyBoston

Reputation: 1143

Unable to override bootstrap css

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 ?

Upvotes: 3

Views: 4911

Answers (3)

meskobalazs
meskobalazs

Reputation: 16041

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.

Upvotes: 2

Preben
Preben

Reputation: 1277

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.

Upvotes: 0

Joe W
Joe W

Reputation: 2891

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.

Upvotes: 0

Related Questions