Everyone says Twitter Bootstrap makes front-end web development faster and easier, but how can we prove that? Below is a video of a simple Visualforce page being converted into a responsive, mobile first web page in a little over 3 minutes and covers the foundation for setting up a bootstrap project natively on Force.com.

 

Cliff’s Sam’s (who is Cliff anyway?) Notes:

  1. Uses a standard set controller (aka standard list controller) to grab all the data.
  2. Uses bootstrap 3.1.1 in this demo, but regardless the point is use 3+. There has been a myriad of upgrades from 2.3.2 to 3.x to make it more awesome.
  3. Check out the code here on GitHub or install the package into your DE org with this link.
  4. Fork this “Visualstrap” library of custom Visualforce components using Twitter Bootstrap to save even MOAR TIME!
  5. Let me know if you have any questions.

tagged , , , , , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • John Szurley

    Very nice demo. Thanks

    • Samantha Ready

      Thanks John!

  • Chris Bland

    Nice demo, but one thing to consider is this will only work with the header off. If you try to include bootstrap in a vf page with a header salesforce styles will get messed up. (while I know there are libraries such as VisualStrap, with those you lack the ability to customize or build from sass files)

    It would be SUPER if salesforce would namespace all of their styles instead of just styling with element selectors. While I realize this will never happen, it would be great for developers so we don’t have to write sfdc-reset classes to sit on the outer most div in our VF pages. OR if salesforce could supply a sfdc-reset class, that would be killer as well so we are not playing wack-a-mole with every release or change to the common.css, or other standard salesforce stylesheets.

    • Jeff Douglas

      +1 for Chris’ suggestion.

    • Mike Petrillo

      I agree, that would be awesome! We’ve forked 3.0+ to work better with visualforce, but it’s a pain

    • http://www.tgerm.com/ Abhinav Gupta

      Good points @chrisbland:disqus !

  • Amit Kumar Giri

    nice demo and its really an extra addup to UI level..

    • Samantha Ready

      Thanks Amit :)

  • Gary Rikard

    Excellent points Chris.

  • Ryan Upton

    Samantha, you rock out loud. Awesome video and example of using bootstrap with Visualforce.

    • Samantha Ready

      Thanks Ryan!

  • Twoopl

    Can we use it with Startup Framework? http://designmodo.com/startup/

  • sonal jain

    @chrisbland:disqus using bootstrap 3.2.2 with the vf page shows the page header(Conatining standard tabs) and side bar appears zoomed. This distorts the UI. Any way where I can use bootstrap without distorting the salesforce standard UI

  • Lawrence Robinson

    Nice Demo Sam! The wheels are turning now. Going to try some other things…maybe a couple of AngularJS tricks. Yeah, I have my mad scientist hat on now…LOL.

  • Jogi shivanna

    This is just brilliant. I am more of a middle layer and back end developer who can roll his sleeves and do UI as well but Bootstrap seems like it is a game changer. It will help folks like me to build awesome UI without much effort, Thanks Samantha! Great video.