Wrapped tw-bootstrap


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

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