Sep 22, 2014

Lab Coat Lesson: Using Bootstrap in Visualforce

During the Summer of Hacks last July, I worked with a pair of coders with no prior Salesforce experience. While I worked on the Apex code, I had them work on the front end because Visualforce could just be straight up HTML if you wanted it to be. So the devs - both of whom had far more experience in modern front-end tools and libraries than I did - decided to use Bootstrap for the front end. But this decision came with a stipulation:

"We had to disable the header and standard style sheets for it to work."

This was okay to me for the time because we were building a Salesforce1 app and the mobile container did not require any headers. But now I want the page to function normally in desktop Salesforce just as well as the mobile version, I put the header and standard stylesheet back on.

Yuck! That's no good! Look at what happened to the Salesforce header and tabs. There is obviously some kind of CSS being overridden from the third-party library to Salesforce. Time to figure out how to use Bootstrap and Salesforce together.