Legacy CSS conflicts with Bootstrap – how to resolve?

Legacy CSS conflicts with Bootstrap – how to resolve?

I’m new to Bootstrap, so this might be a naive question for you all. But I’m sure others have or will have a similar question so here goes.
I’m implementing bootstrap to a site that has been around for quite a while and evolved over the years. As soon as I add the bootstrap css and js to my html, many elements get messed up. As far as I can tell, this is attributable to me using the same class names as bootstrap. For example, I have a class called ‘btn’ and so does bootstrap. All my buttons look ugly and/or odd shaped. The list goes on and on.
Is this pretty much par for the course when people first implement Bootstrap on an existing site? Is it just a matter of going through the old css files and renaming things? Any elegant solutions out there?

Solutions/Answers:

Solution 1:

Paul and Millimoose both provided the solution that worked for me. However, for newbies, the solution took a bit of digging, so here’s a step by step description of what worked for me (and what I believe they were recommending).

  1. Basically, you have to modify the bootstrap css file. Basically wrap the entire bootstrap css file inside this:

    .bootstrap{
    //entire boostrap css file goes here
    }

  2. Use http://winless.org/online-less-compiler to generate new css code. You’ll need to past the code above into the left hand side of form in the above link.

  3. Copy and past the output from the above link into a css file. Include this css file in your html.

  4. When needing to use boostrap, simply place around the elements you want bootstrap to apply to.

Related:  Bootstrap popover destroy & recreate works only every second time

Big thanks for all the help in figuring out this solution. Works well.

Solution 2:

I think the easiest way is to use a css pre-processor to namespace all of bootstraps css components.

If you got to their github repo: https://github.com/twbs/bootstrap/ you will see they have a LESS distrubution of the code. From there, you can namespace all of their styles by wrapping the library in some kind of class, such as millimoose mentioned.

From their you can add the bootstrap namespace to certain html elements, and the library will only effect that dom node and its children.

Solution 3:

I did a GIST with Bootstrap 3 all inside a class named .bootstrap-wrapper
https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

I started with this tool: http://www.css-prefix.com/
And fix the rest with search and replace in PHPstorm.
All fonts @font-face are hosted on maxcdn.

First line example

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

References

Related:  twitter bootstrap 3 modal on mobile scroll issues