4

My problem is with my project integration to another website. For example i have website build from 0 and my specified system build on boostrap or foundation. When i try to integrate it on my website, all my website start using boostrap or foundation style. Is posible to make work this css only in for example

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

<table class="table table-bordered">...</table> <!-- here don't work -->
Romans Leonovs
  • 53
  • 7
  • That's pretty much how they're supposed to work. Typically you would either set your defaults and compile bootstrap or foundation with your new settings, or you would write css to override their styles. – FiLeVeR10 Jan 16 '16 at 19:58
  • 1
    One of idea was rewrite all boostrap css file like #boostrap_only table {...} but it will be painfull :D – Romans Leonovs Jan 16 '16 at 20:35

1 Answers1

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

Community
  • 1
  • 1
J.Tural
  • 887
  • 12
  • 31