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

TIP