<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)
- 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
- 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.