Override bootstrap !important

Question

I just want to get rid of outline in my dropdown list when focus state. See this image

I tried to override bootstrap using !important but not working at all. Just check the dev tools and suddenly see this.

Bootstrap is also using !important tag. So I couldn't override it. I can use id to button and set focus outline to 0 but I have so many dropdowns in my website. Any fix for this kind of situation?

.bootstrap-select .dropdown-toggle:focus{
   outline: none!important;
}

Answer 1

Your style.css file loads before your Bootstrap css file. However, you have to load your style.css after the bootstrap-select.min.css file in order to override the Bootstrap styles.

Answer 2

In your HTML, load style.css after you have loaded bootstrap-select.min.css.

In other words, load bootstrap-select.min.css first, then load style.css.

Within the same rule, the property that got defined later on will override the formerly defined property.