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

A good rule of thumb. Always put the stylesheet with the rules you want to be most authoritative last. You probably have

<link rel="stylesheet" href="/css/mystyles.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

So any styles declared in bootstrap css will override yours. instead try

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mystyles.css">

This way the rules in your stylesheet have more precedence.

Aside from that, you may be better off not using the minified version of bootstrap so you can remove any conflicting classes easier.

Answer 2

You go to the Customizer on getbootstrap.com http://getbootstrap.com/customize/

Toggle the stuff you need:

Then you download it.

You open it up. Look at the base styles and the global box-sizing:border-box.

Either you change all your CSS to work with box-sizing: border-box (google it), or you put that on the :before, :after, and element on all the bootstrap css that you need for forms, buttons, and the dropdown (they work together).

Answer 3

So simple use less to strip out the BS components you don't need. Compile and minify a bootstrap.min.css file and then import this into your stylesheet using:

@import url("bootstrap.min.css"); at the top. Then in your HTML simply include your CSS and these will be read after.