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 the

Answer 1

no need to fork/edit original bootstrap. Just wrap its imports in your file like this (sass in my case): I created the file "bootstrap-scope-limit.scss" (that I import where I need bootstrap):

.bootstrap-inside {
  @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
}

important notices!

please keep in mind that bootstrap has some body styles that wouldn't be applied when using such approach. But it gives you an ability to control bootstrap with JS by adding the "bootstrap-inside" class to the element to enable or disable bootstrap for the whole page if some dynamic content has to use bootstrap or not.

another concern you should aware about: some plugins that override bootstrap styles may have problems since bootstrap styles with new class wrapper become stronger (more specific) and can't be overridden by unwrapped plugins.

---

for webpack case I would recommend to use this loader: https://www.npmjs.com/package/wrap-css-loader to wrap the whole bundle, that you may use as a part of your app (div?) later