Limit the scope of bootstrap styles

Question

How do I limit Bootstrap to just the scope of a div? I need to nest the Bootstrap stylesheet inside an ExtJS app for especific divs and both are clashing since they need their own body, ul, li, a, etc.

I'm trying to avoid editing bootstrap.css manually (or keeping it to a minimum) so that it can be easily updated.

Answer 1

You can fork the bootstrap repo and change bootstrap.less to wrap the bootstrap styles:

.bootstrap-scope {
    //put bootstrap @includes in here
}

Then, in the root of the bootstrap project, run make to generate the bootstrap.css file.

You'll lose the global styles bootstrap assigns to the body and html tags, but you might not want them anyway.

And then, in your app, give the container you want the .bootstrap-scope class.