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 feature of their framework. However, as soon as I insert:

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

My own css is a mess. I tried to isolate only the classes I would need for splitbutton, but I was not able to successfully do it.

This is my html code for the splitbutton with the requiered classes

<div class="btn-group">
                          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button>
                          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
                          <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Enviar con notificaciones</a></li>
                          </ul>
                    </div>

Does anybody know a way to isolate the desire classes? Or may be point me to another implementation of a splitbutton that is similar to this one and cross-browser? I googled a lot but the only usable one I found was bootstrap.

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.