I recently helped a fellow irc'er figure out how to namespace Bootstrap. At first I linked him to this video: https://www.youtube.com/watch?v=3BtTnvM02Eg&t=426 . But then I realized a video may not be the best way to present this information, especially if you do not have much of a modern dev/build environment setup on your machine. We'll walk through everything you need to install in order to successfully build a namespaced version of Bootstrap, an OS X device.
First, let's install HomeBrew. Simply use the one liner you can find here: http://brew.sh/ .
Second, we need to install Node using HomeBrew. Type
brew install node
Third, we need to install Grunt by typing:
npm install -g grunt-cli
Now we should have all the tools we need in order to build a namespaced version of Bootstrap.
In order to build, navigate to a folder where you'd like to clone the Bootstrap git repo and type:
git clone https://github.com/twbs/bootstrap
Now, navigate to ./bootstrap/less/bootstrap.less and add a new line as the first line of the file:
then add a new line at the very end of the file:
You have now just wrapped all of the less in a class named myBootstrapNamespace.
Now we need to build Bootstrap.
Navigate to ./bootstrap and type
Once that finishes, type
After a bunch of text scrolls by with the status of various build steps, you should now have your namespaced version of Bootstrap in the ./bootstrap/dist directory. Simply put this version into your static resource in Salesforce, and you can now style your Visualforce page contents using Bootstrap by making a container div within your page like:
<apex:page ........> <!-- Include the namespaced css from your static resource --> <div class="my-bootstrap-namespace"> <!-- My HTML Here --> </div> </apex:page>
Caveats: Salesforce styles which come down with a VF page with the header on can be very broad, some will override the Bootstrap CSS. Also, keep in mind you are essentially developing your entire page within a <td> element, this can result in some funkyness with inherited properties on your divs, specifically you may need to fiddle with display props to get parents to actually fully contain their children.