Fix Visualforce Sidebar and Header when using Bootstrap

The Problem

When using Bootstrap on a visualforce page with a sidebar and header showing you will undoubtedly notice that the styling of the sidebar and header will have changed to something rather undesirable. This is because Bootstrap is overriding some of the salesforce styling like the body text size. See the difference below, the left side is the undesirable bootstrap version.

Thankfully there is a way around this issue though it will involve compiling your own version of Bootstrap to use your own custom namespace.

Prerequisites  

There are a few thing you will need for this exercise: 

• download the Bootstrap source code - you can get this from the bootstrap download page 
• node.js - You will need to download and install node.js to get and run grunt.
• Grunt - Grunt is what you need to build/compile and test Bootstrap. To install grunt globally from the node.js command line run the following npm install -g grunt-cli.

Now What

Now that we have bootstrap, node.js and grunt we can alter bootstrap to include a custom namespace so that our visualforce paged can differentiate between when/where to use salesforce css and when/where to use bootstrap css.

Follow the following steps:

• In node.js command line  navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there
• From the bootstrap source open /less/bootstrap.less
  
• wrap the contents of /less/bootstrap.less in a class like .bs{}

eg

• still in node.js command line and root /bootstrap/ directory run grunt or grunt dist. This  will regenerate the /dist/ directory
• Zip the contents of  the /dist/ directory and upload to the salesforce static resources.
• Now you can wrap only the content you want affected by bootstrap style in a tag with a bs class like below.