Please help me bootstrap css conflict to other css

HTML & CSS
1

Hi, I need your help please I am using bootstrap and i have problem when i append the bootstrap.css in my header section it will conflict to other css templates of my website,can you help me please how to solve this

Thank you in advance.

2

Hi,

We will need a little more information to go on but when you are using bootstrap you should call your over-ride css last in source (i.e after the bootstrap css files). Then as long as you have managed specificity correctly your rules will win out.

I’m not sure if this is what you meant though so a more detailed example will be needed for us to be more specific to your problem.

3

HI Paul O’B,

In my header section


<!-------------------->
   some css and js external files here...

<!------------------->

   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script language="JavaScript" type="text/javascript" src="js/jquery1.11.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootbox.min.js"></script>

I put all my css and js files below,but still my page will mess up if the bootstrap.css will be included…how can i make it work so that the bootstrap.css will not conflict to other css above…If i will remove the bootstrap.css the site will looks ok.

Thank you in avdvance.

4

Try it this way

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!-------------------->
   some css and js external files here...

<!------------------->
5

still the same.,I think the my templates css has same class with the bootstrap.css…that’s why it mess up

6

Have you tried adding !important to your CSS?

7

As Mittineague said above you can add !important to your rules to give them more specificity as a last resort but of course that won’t cancel out any styles that are cascading through to your rules that you have not addressed or over-written.

If you are using the same classes as bootstrap then that’s very awkward as there will be many conflicts. I just created about 200 pages with bootstrap2 and only ran into an issue with class names once and that was because the letters ‘span’ were contained in a class name I made up (.span-row) and were matched by bootstrap’s attribute selector ([class*=“span”]).

I think we will need to see your page to give further help or you will need to learn how to use the developer tools (or Firebug in Firefox) to look at the html in your page and see where all the styles are coming from and in this way you can pinpoint conflicts within seconds (although they may be awkward to fix if you have built the whole page using duplicate classes from the bootstrap file).

Of course it may something much simpler than that but without the full picture its hard to say :slight_smile:

8

@Paul O’B,Mittineague,

Thank you for the reply and helping me.