Here is how you can apply bootstrap styles inside any container tag, without affecting tags and elements outside of the container tag.

<div class=”non-bs-parent”><aside></aside> <div class=”bootstrap-inside”>…</div> </div>

Let’s say you want to apply bootstrap only inside the div.bootstrap-inside container. But default bootstrap sylesheet will impact the entire document. Having a wrapped boostrap stylesheet will limit the bootstrap styles inside the container. Requirements
  • SCSS compiler
  • CSSNano (if you want to minify the CSS)
The How
  • Create an .scss file and import your bootstrap scss file by wrapping the import into the class you want to wrap bootstrap into
  • Compile SCSS
  • Minify using CSSNano if you want to minify
The Commands
  • Install SCSS SASS compiler
  • Install CSSNano minifier – npm install cssnano-cli –global
  • Compile SCSS – sass watch.scss output.css
  • Minify output SCSS – cssnano output.css
You might want to specify some default CSS for styles that might get inherited for all nested styles because the default CSS for *,html,body will also get wrapped when you wrap your tw-bootstrap CSS.