Legacy CSS conflicts with Bootstrap - how to resolve?

Question

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 boot

Answer 1

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.

Answer 2

This issue occurs when an HTML document recognizes two parameter of one style within it.

Remove or comment or modify parameters that caused project messed up. bootstrap.css file or any referrence else, except your custom css file.

Notice : you aren't able to do this when you use bootstrap.min.css format of file. use bootstrap.css without min to be editable.

Answer 3

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.

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

Answer 4

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%}