How to use BootStrap 3 with VisualForcePages in Salesforce

by - 10:19 PM

+Samantha Ready  have created a neat video, explaining implementation of Visualforce. Check the video below

How to design beautiful responsive visualforce pages with BootStrap3 ?

In my last post here, I have mentioned how to use BootStrap with Salesforce, sooner the BootStrap3 was released and I received many complaints from readers out here that for some reason BootStrap3 is not compatible with Visualforce.

I therefore quickly designed this bootstrap responsive template using BootStrapV3 free template page and incorporated into VisualForce Page in Salesforce. This page handle responsive behavior, which is if you reduce/shrink the size of pages then the design changes it layout, which makes it perfectly suited for Mobile/IPad or any other device as well.

Keeping the guidelines provided here Google WebPage Design Best Practices. I removed the static resources of Javascript/CSS Stylesheet from my page and instead added a CDN. Adding CDN, makes the page load faster and you can copy this code verbatim in your org to run and test without downloading and uploading BootStrap files.

What is CDN ?

For those of you who don't now what is CDN here is quick explanation provided by
A content delivery network (CDN) is an interconnected system of computers on the Internet that provides Web content rapidly to numerous users. CDNs are used by Internet service providers (ISPs) to deliver static or dynamic Web pages but the technology is especially well suited to streaming audio, video, and Internet television ( IPTV ) programming.

Check out the code here, copy-paste and run in your organization to give a try. Let me know, if you have some better template to share, I would be posting some enhanced template pretty soon

You May Also Like