SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Please help me bootstrap css conflict to other css

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    HI Paul O'B,


    In my header section


    Code:
    <!-------------------->
       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. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,268
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Try it this way
    Code:
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-------------------->
       some css and js external files here...
    
    <!------------------->

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    still the same.,,I think the my templates css has same class with the bootstrap.css....that's why it mess up

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,268
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Have you tried adding !important to your CSS?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,159
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B,Mittineague,

    Thank you for the reply and helping me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •