twitter-bootstrapcsstwitter-bootstrap-3zurb-foundation

Integrate CSS framework work only in specified class or ID


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

Solution

  • 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