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 -->
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:
bootstrap.css
and bootstrap-responsive.css
) into bootstrap-all.css
.bootstrap-all.scss
, with the content div.bootstrap {
.bootstrap-all.css
to bootstrap-all.scss
.div.bootstrap
selector by appending }
to bootstrap-all.scss
.bootstrap-all.scss
to produce a final CSS file.<div class="bootstrap"></div>
.for reference see this links link 1