Sandbox

Question

Bootstrap is excellent, but too stubborn. The selectors in their rules are very wide, like input or label .

Is there a way for the Bootstrap CSS sandbox to only apply rules to elements in a container with a specific class?

Right now, we had to replace-regexp CSS source to add .bootstrap to each selector. However, this can break Bootstrap modal windows and more.

Answer 1

You can use a locked style block containing the @import rule in it. You can even write a little JS to add this to every element that has the desired class.

 <div class="untouched"> </div> <div class="bootstrapped"> <style scoped> @import url("bootstrap.css"); </style> </div> 

Estimated jQuery:

 $('.bootstrapped').prepend('<style scoped>@import url("bootstrap.css");</style>'); 

I understand that scope not very widely supported, so here is polyfill: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin