How to use Twitter BootStrap with VisualForce Pages

by - 4:14 PM

Read my new post here - http://www.oyecode.com/2013/11/how-to-use-bootstrap-3-with.html

What is BootStrap ?

Smart web-developers and active readers out there need no introduction , but for fairly new web developers here, I can say bootstrap is front-end very slick framework offered by Twitter.Inc. With simple import (as static resource) in Salesforce can change your experience of designing visual-force pages significantly and reduce development time to fairly low. Using standard html tags you can create some beautiful and interactively rich effect, also on top of Visualforce as well.


Who use bootstrap ? 

Recently I designed Sales User Application that incorporates Salesforce data and present it on top of Google Map, this Google map is hosted on visualforce page and with some filters you see all your data on top of a Map. The filters, drop down effect, auto re-sizing application UI, I designed in hours with help of bootstrap and just wow the clients 


A serious thanks to bootstrap for make it easier and reducing my work from weeks to hours 

There are tons of websites out in market using bootstrap - see here and here for more examples


How do you add Bootstrap to Salesforce/Visualforce page ?

Follow the steps below to incorporate bootstrap

1. Go to bootstrap page and download .zip file
2. Import zip in your Salesforce Organization as static resource or  Read how to add static resource in Salesforce
3. Don't change the file structure to make this code work

I designed visualforce page, displaying web components beautified by bootstrap with before/ after pictures


Before BootStrap the components looks like 


After effect on components




Try the code below to add rich effects to your page

I have designed some interesting pattern for advance implementation using BootStrap which I'll be sharing soon here at github. Please feel free to share your code, or fork directory for submission of design you own (designed on Visualforce) and would like to share

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




You May Also Like

0 comments