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 lot of people are talking about adding your custom css after bootstrap. Typically it seems this works, however, I've come across a time, when using the .modal class where it appears to reload the bootstrap overtop my custom css. I don't (yet) know why. In that case I have worked around the problem by either creating a class for my element in my css (and changing my html to use that class) which makes my css more specific/narrowly defined and therefore takes precedence, or by using !important, as mentioned by @kder.

So, try the order, and if for some reason that doesn't work, you have to find a way to force your css to be more specifically targetted or use !important.

Example (code snipped for brevity). In this code I have bootstrap css followed by my tripper.css. If I remove the code at the bottom with class="modal", this works and my body is formatted according to the css in tripper.css. If I leave the modal code at the bottom, I have to add !important to the body selector.

tripper.css

body {
  background-color:#00aaff;
}

html

  

  


  

...
  

  

...
  

  
  

    

      


        
        

        
        
        

          

        

        
        

      
    
  
  
  

    

      

        
        


        
        

          ??navigate.add??
          ??navigate.close??