apply external CSS to specific area

Question

I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.

Is it possible to only apply Bootstrap to a region (say a parent div or something?)

Thanks

Possible duplicate of [Applying CSS styles only to certain elements](http://stackoverflow.com/questions/11831346/applying-css-styles-only-to-certain-elements) — J.Tural, Jan 18 '16 at 22:15

Joseph Silber · Accepted Answer · 2015-10-29T17:44:02.180

8

The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).

HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.

If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.

edited Oct 29 '15 at 17:44

answered Nov 11 '11 at 17:23

Joseph Silber

214,931
59
362
292

I was afraid that was the case. Thanks Joseph! – julio Nov 11 '11 at 17:27

score 3 · Answer 2 · edited May 23 '17 at 11:53

3

I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less

Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.

edited May 23 '17 at 11:53

Community

1
1

answered Oct 17 '12 at 18:40

user1425385

127
2
10

That might work, but note that it involves editing the CSS which you can't always do when it's external. – Adrian Heine Oct 17 '12 at 18:48

score 3 · Answer 3 · answered Nov 11 '11 at 17:31

3

Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.

answered Nov 11 '11 at 17:31

Casey Robinson

1,021
9
17

2

@Casey-- won't this require writing default rules for virtually every possible element, since Bootstrap has hundreds of defined styles? – julio Nov 11 '11 at 17:32
@julio only for every element that you use. most of which will have some sort of styling already. – Casey Robinson Nov 11 '11 at 17:34
@CaseyRobinson, having the Bootstrap CSS first before anything else would be the ideal situation but Bootstrap consists of hundreds of classes, and element selectors that your overrides can only work on Bootstrap overrides. You still have to counter the other selectors that Boostrap implements that will make elements look funky. – Dennis Rongo Jan 04 '13 at 03:55

apply external CSS to specific area

3 Answers3

Linked