CSS Bootstrap overrides my own CSS

Question

I am trying to create a split-button in my website (ASPNET WebForms). So far the only split-button implementation I like is the one from Bootstrap. I am not using any other feat

Answer 1

As mentioned in the other solutions on this page, there are ways like:

1. Creating a custom bootstrap css from the bootstrap website
2. Placing your custom styles that you do not want bootstrap to override, after the bootstrap style tags on the page

According to my experience, creating a custom bootstrap css or editing it to remove unrequired classes or style-rules is not so practical. This is because when a newer version of bootstrap is out, you might need to go through the cumbersome procedure again.

Instead, you could go ahead with overriding the bootstrap styles with your own styles, placed after the bootstrap styles, with another step that will more effectively help you to prevent others from overriding your styles.

You can have a look at specificity of CSS styles at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ or https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

One example could be, writing a style

.btn {
    background: red;
}

as

#mypage .btn {
    background: red;
}

where, mypage could be an ID of a parent-most element on the page (may be the body tag?). This would make your style rules more specific than the ones that are defined in the bootstrap CSS, they will no longer be able to override yours then.

Please note that the above code snippet is just an illustration, and you could definitely write better styles for the cause.