title: Override bootstrap !important
body: <p>I just want to get rid of outline in my dropdown list when focus state. See this image</p>
  
  <p><a href="https://i.stack.imgur.com/nUhiw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nUhiw.png" alt="enter image description here"></a></p>
  
  <p>I tried to override bootstrap using !important but not working at all. Just check the dev tools and suddenly see this. </p>
  
  <p><a href="https://i.stack.imgur.com/20hyc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/20hyc.png" alt="enter image description here"></a></p>
  
  <p>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?  </p>
  
  <pre><code>.bootstrap-select .dropdown-toggle:focus{
     outline: none!important;
  }
  </code></pre>