How To Apply Scoped Stylesheet?

Is there any way I can apply bootstrap.css only on a div element ? Example: my global class text-danger is defined, but for the #wrapper I want to apply boostrap.css. So .text-dang

Solution 1:

Based on your comments, as scoped css is only supported by firefox, one thing you could do (bit hacky but it may suit your needs) is give your div a class - something like bootstrap-styles then you can go through the bootstrap css file and put .bootstrap-styles before each style

This will be a lot easier if you are using some sort of css processor like less or sass as you can just wrap all the bootstrap styles in your class

Other than this, you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

Solution 2:

For only one element you would want to do inline style ()

for a repetitive class throughout your site, you should extract that class styling to a custom CSS/SCSS file of your own and include it.