Wrapped tw-bootstrap

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.

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.

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

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.

Feature photo by Nimit Kansagra

Created with MailerLite