Applying CSS styles only to certain elements

For Bootstrap 3, it's easier if you use less:

Download the Bootstrap source code and make a style.less file like this:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

Finally, you have to compile the less file; there are many alternatives

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

Or use npm to install less then compile the style.less file to style.css:

npm install -g less
lessc style.less style.css

The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:

1. Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
2. Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
3. Append bootstrap-all.css to bootstrap-all.scss.
4. Close the div.bootstrap selector by appending } to bootstrap-all.scss.
5. Run SASS on bootstrap-all.scss to produce a final CSS file.
6. Run YUI Compressor on the final file to produce a minimised version.
7. Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.

I came up with a CSS solution if you can't use LESS/SASS because of work/other reasons.

1. I used this site, http://www.css-prefix.com/, and copy/pasted bootstrap.min.css into there. I set prefix ='.bootstrap' and spacer =' '. It will prefix everything with .bootstrap except not perfectly.
2. If you do a grep for '.bootstrap @media', you will find that the first class to the right of the opening bracket doesn't have .bootstrap as the parent. Add .bootstrap to all these occurrences, about 68 for me.
3. Then replace all '.bootstrap @media' with '@media'.
4. Final step is to replace all '.bootstrap @' with '@' (should be about 5 occurrences).

Example:

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

needs to be replaced to

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

Kind of a brute force method, so definitely try the LESS/SASS method above first.

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

I have an easy solution.

1. Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.

2. Add your tag information (e.g. div.bootstrap{ ) to the start of scss content and close the tag at the end.

3. Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)