7

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

Improve this question
2

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I was afraid that was the case. Thanks Joseph!
3

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

Improve this answer

3 Comments

@Casey-- won't this require writing default rules for virtually every possible element, since Bootstrap has hundreds of defined styles?
@julio only for every element that you use. most of which will have some sort of styling already.
@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.
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.

Improve this answer

1 Comment

That might work, but note that it involves editing the CSS which you can't always do when it's external.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.