Question

Bootstrap is great, but too opinionated. Selectors in its rules are very broad, like input or label.

Is there a way to sandbox Bootstrap’s CSS so that it only applies the rules to elements in a container with a certain class?

Right now we had to replace-regexp the CSS source to prepend .bootstrap to every selector. However, it might break Bootstrap’s modal windows and whatnot.

Answer 1

You could use a scoped style block that contains an @import rule in it. You could even write a small JS to add this to every element that has your desired class.

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

The tentative jQuery:

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

I realize scope isn’t very widely supported, so here’s a polyfill: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin