CSS conflicts are common when using a bootstrap. within an existing page with other styles already defined.
You can isolate your CSS bootstrap so that it acts from a specific DIV, as in the example below:
<div class="bootstrap-iso"> <!-- A partir daqui sua página será estilizada com seu Bootstrap CSS --> </div>
How do I isolate my bootstrap CSS?
- Install Node.JS on your computer: http://nodejs.org/
- Now we’re going to install a CSS processor that will do the isolation:
npm install -g less
- Create an empty directory and copy your boostrap CSS files into it:
- In this directory add the file “prefix.less” with the following content
.bootstrap-iso {
@import (less) 'bootstrap.css';
}
Each line corresponds to your boostrap file that will be isolated.
- Open CMD (Windows) or Terminal (Linux), go to the directory created above and run the following command:
lessc prefix.less bootstrap-iso.css
A new CSS file, “boostrap-iso.css”, has been generated.
Now just include this file on your page, and add the class=”bootstrap-iso” to the DIV you want to apply the bootstrap to.
