Disable bootstrap for one element

Question

What I want to achieve is to disable the Twitter Bootstrap class for my own input element with class named login_button. By default the bootstrap.min.css class is adding unnecessary properties like box-shadow etc. to my input.login_button element.

I know I can define box-shadow: none; but I wonder if there are other possibilities to achieve that?

Answer 1

You can't, except by modifying bootstrap.min.css. All you can do is overwrite the styles with more specific selectors.

Answer 2

Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:

input.login_button {
    box-shadow: none;
    border: none;
    line-height: initial;
    /* Etc. */
}

Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.

Answer 3

Solution

The Easiest Solution in this case is that you can write !important with you own custom CSS lines and that will prevent bootstrap from adding any unintended styles.