How to use Bootstrap or other CSS frameworks on a small part of a page without affecting the rest of the page’s style

I’m currently working on a project where I have an AngularJS app (a form), that will be displayed on several different external websites. This means that I have to style the form to fit into several different page designs, with different existing stylesheets.

The form itself is styled using Bootstrap, one of the most commonly used front-end frameworks.

TL;DR: To style only a selected part of a website using a CSS framework, I create a container div around the app with a unique id, and then use LESS to change all the style definitions in the framework to only affect this particular id. This process is done automatically on build using .NET MVCs bundling framework.

Continue reading “How to use Bootstrap or other CSS frameworks on a small part of a page without affecting the rest of the page’s style”