Home » BootStrap » How to use BootStrap 3 with VisualForcePages in Salesforce

How to use BootStrap 3 with VisualForcePages in Salesforce

in - on 23:26 - 29 comments










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 Whatis.com
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


12345678910111213141516171819202122232425262728

<!-- Resource : Oycode.com, Harshit Pandey -->



<apex:page standardController="Account" showheader="false" >



   <html lang="en">



      <head>



         <!-- Bootstrap -->



         <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen"/>



         <link href="//getbootstrap.com/examples/signin/signin.css" rel="stylesheet" media="screen"/>



         <title>BootStrapV3 on Visualforce Page by Oyecode</title>



               </head>



      <body>



         <div class="container">



            <form class="form-signin"><br/><br/><br/>



               <h2 class="form-signin-heading">Please sign in</h2><br/><br/>



               <input type="text" class="form-control" placeholder="Email address" > </input>



               <input type="password" class="form-control" placeholder="Password"> </input>



               <label class="checkbox">



               <input type="checkbox" value="remember-me">  </input>Remember me



               </label>



               <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>



            </form>



         </div>



         <!-- /container -->



         <!-- Bootstrap core JavaScript



            ================================================== -->



         <!-- Placed at the end of the document so the pages load faster -->



      </body>



   </html>



</apex:page>
view rawgistfile1.html hosted with ❤ by GitHub
Labels:

29 comments

Unknown mod
14 November 2015 at 23:30

The information you have given here is truly helpful to me. CCNA- It’s a certification program based on routing & switching for starting level network engineers that helps improve your investment in knowledge of networking & increase the value of employer’s network, if you want to take ccna course in Chennai get into FITA, thanks for sharing…
ccna training in Chennai | ccna training institute in Chennai

Reply
Murali Rajesh mod
6 January 2016 at 02:29

What i really like about salesforce is its user friendly UI and it is a cloud based tool so it can be accessed from any where. Also there is a mobile app and the features are such that any sales rep would fall for it.
salesforce training in chennai|salesforce training institute in chennai|salesforce training institutes in chennai

Reply
Unknown mod
20 October 2016 at 06:04

Really interesting content which is unique which provided me the required information.
SCM training in chennai

Reply
Unknown mod
20 March 2018 at 06:05

Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
Regards,
Salesforce Training in Chennai|Salesforce Course in Chennai

Reply
Unknown mod
17 July 2018 at 04:21
This comment has been removed by the author.
Unknown mod
17 July 2018 at 04:29

I really like this post. Medical practice management software that supports Medical Practitioner to organize their practice in a smart and efficient manner so as to increase productivity.Thanks for sharing Cloud computing Training | Cloud computing Training in Chennai

Reply
Unknown mod
26 September 2018 at 00:24

Thank you so much for all the wonderful information about sensors! I love your work
Salesforce Training in Chennai | Salesforce Training | Salesforce Training Institutes in Chennai

Reply
akhilapriya404 mod
27 September 2018 at 06:11

I have read your blog its very attractive and impressive. I like your blog salesforce Online Course

Reply
lekha mathan mod
7 October 2018 at 21:03

Such an excellent and interesting blog, do post like this more with more information, this was very useful, Thank you.
Salesforce Training in Chennai
Salesforce Certification

Reply
mathimathi mod
8 October 2018 at 02:40

I love all of your signs, but the apples and pumpkin sign are perfect for this season!
Salesforce Training in Chennai |
Salesforce Training |
Salesforce Training Institutes in Chennai

Reply
mathimathi mod
8 October 2018 at 02:42

you make beautiful signs. I've got to learn to do this. Maybe after I conquer "the beast."
Cloud computing Training |
Cloud computing Training in Chennai |
Cloud computing courses in Chennai

Reply
Unknown mod
15 October 2018 at 02:45

useful for the seekers who get good attention in the area.
Salesforce Training In Chennai

Reply
thulasiram mod
9 November 2018 at 01:43

Wow! What an article.. and beautiful photos! And just at the right time!
JAVA Training in Chennai |
JAVA Course in Chennai |
Best JAVA Training in Chennai

Reply
Mageshkumar mod
14 November 2018 at 01:21

Very nice and helpful information has been given in this article about emr software . I like the way you explain the things. Keep posting. Thanks..
Hadoop Training Chennai |
Hadoop Training in Chennai |
Best JAVA Training in Chennai


Reply
Mtoag Technology mod
20 November 2018 at 01:58

Wow such a nice post which you uploaded here. Thanks for sharing so nice article. It really helps me out.
Angularjs Development Company |
Hire Angularjs Developer

Reply
manisha mod
28 March 2019 at 04:42

Its a wonderful post and very helpful, thanks for all this information.
CCNA Training in Delhi

Reply
Vicky Ram mod
1 April 2019 at 23:49

Thanks for sharing this post.Keep sharing more like this.

oceanofquotes
Guest posting sites

Reply
jvimala mod
20 June 2019 at 04:54

And indeed, I’m just always astounded concerning the remarkable things served by you. Some four facts on this page are undeniably the most effective I’ve had.
Salesforce training in chennai | Salesforce training institute in chennai | Salesforce course in chennai | Salesforce certification in chennai

Reply

Post a Comment