Bootstrap is a free and really popular open source CSS framework that works pretty well for designing responsive websites and web applications. Under the hood, it’s a giant collection of handy reusable bits of code written in HTML, CSS and JavaScript.

By incorporating Bootstrap into Visualforce pages we are able to some pretty good looking websites. Bootstrap and Visualforce can work very well together allowing us to accomplish a lot. For example, the eWAY Merchant Application is built with Visualforce, Bootstrap and jQuery.

Step one is to download Bootstrap from their website located at https://getbootstrap.com/ and simply click the “Download” button.

After you have downloaded the zip, you can simply upload it into the static resources and use it in our html in a secure and consistent way. Assuming you have uploaded a zip file called “bootstrap.zip” we could reference it in our pages like this.

<apex:includeScript value="{!URLFOR($Resource.scripts, '/bootstrap.min.js')}"  />

Depending on how we intend to use it, ie is it internal visualforce pages or is it external visualforce pages we might need to do things slightly differently.

Using it For Internal Salesforce Pages

If you are intending to use bootstrap on internal pages you will probably need to customize the CSS for bootstrap because Salesforce’s stylesheets don’t play all that well with it.

CSS works in a global scope, so any time we use Salesforce’s headers (aka Salesforce’s style.css) there will be clashes. We can solve that by doing the following:

1. Unzipping the bootstrap zip that we downloaded above.
2. Opening up the bootstrap.scss and wrapping the entire whole with a custom named class. I tend to think I’m pretty pragmatic so I use things like .bootstrap
3. Compile a new css file.
4. Whenever we want to use Bootstrap we simply wrap all of the components in a div like this <div class=”bootstrap”>AllMyAwesomeHTML</div>.
5. Upload all the bootstrap goodies to static resources and reference them in pages.

For a more detailed breakdown see Chris Youderian’s post called “How to Isolate Bootstrap CSS To Avoid Conflicts“.

Using Bootstrap In External Salesforce Pages

For external facing pages that don’t need any of the Salesforce UI you can simply turn off the tabs, header, and side like this:

<apex:page standardStylesheets="false" showHeader="false" sidebar="false" >

</apex:page>

This works pretty well when the page isn’t intended for internal data entry or when we really need Salesforce’s styling.

I also recommend considering setting applyHTMLTag to false so we can insert our own html, head, and body tags. Setting the docType to “html-5.0” can make this a lot more pleasant experience.