Integrate CSS framework work only in specified class or ID

Question

I have website built from scratch and my specified system build on Bootstrap or foundation. When I try to integrate it on my website, all my website start using Bootstrap or foundation style.

Is possible to make work this CSS only in for example

<div id="bootstrap_only">
    <table class="table table-bordered">...</table> <!-- here works -->
</div>

<table class="table table-bordered">...</table> <!-- here don't work -->

Answer 1

there is many ways .

1- using less ( in your less file include your bootstrap like this )

.bootstrap {
    @import "/path-to-bootstrap-less.less"
    @import "/path-to-bootstrap-responsive-less.less"
}

2- detailed solution :

The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:

1. Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
2. Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
3. Append bootstrap-all.css to bootstrap-all.scss.
4. Close the div.bootstrap selector by appending } to bootstrap-all.scss.
5. Run SASS on bootstrap-all.scss to produce a final CSS file.
6. Run YUI Compressor on the final file to produce a minimised version.
7. Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.

for reference see this links link 1