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<

Answer 1

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.

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

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