CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3zurb-foundation
Romans Leonovs
Romans Leonovs

Reputation: 53

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

Upvotes: 4

Views: 110

Answers (1)

J.Tural
J.Tural

Reputation: 925

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

Upvotes: 1

Related Questions