SalesforceVenkat81215

Bootstrap examples in visualforce page.

Steps to follow

Add bootstrap css
Use bootstrap css in Visualforce page

Add bootstrap css

You can add the bootstrap css in two ways

Static resource
Via CDN

Static resource

In order to add bootstrap via static resource please refer this post [ Using a static resource in Visualforce Page ] .

Via CDN

What is CDN ?

CDN is short for content delivery network.
A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.
This service is effective in speeding the delivery of content of websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user. CDNs also provide protection from large surges in traffic.

Reference : http://www.webopedia.com/TERM/C/CDN.html

How to add a CDN to Visualforce page ?

You can get the bootstrap CDN from this link http://www.bootstrapcdn.com/

Paste the below code in you head section in order to load it before the body content loads.

<head>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>

Use bootstrap css in Visualforce page

Now we got included the required css files in our page. All we need is to use the class in our page elements.

If you are using html inside Visualforce page you can use class property of it as shown below.

<button type="button" class="btn btn-primary">Primary</button>

If you are using apex tags you can use styleclass property of the apex tag as shown below .

<apex:commandButton styleClass=" btn btn-primary" value="Submit" />

Note if you are using any external style sheet please turn off the standard style sheet in Visualforce page as shown below.

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <apex:form >
    
    <h2>
         Beautiful user interface with bootstrap
    </h2>
    <br/>
    
    First Name : <input type="text" class="form-control"/>
    Last Name : <input type="text" class="form-control"/>
    Degree : <input type="text" class="form-control"/>
    Comments : <input type="text" class="form-control"/>
    
    <apex:commandButton styleClass=" btn btn-primary" value="Submit" /></apex:form>
    <button type="button" class="btn btn-primary">Primary</button>
    
</apex:page>

The output of this page is rendered as show in the following screen shot.

You can refer the css classes in bootstrap in this link getbootstrap.com/css.

Example 1:

In this example i am using CDN links instead of keeping them in static resources, If you want you can put them in static resources.

In this example i did not implement the save functionality. just for look and feel simply putting the HTML stuff in VF page tag.

<apex:page >

<head>

<style>

.red{

color:red;

}

.form-area

{

background-color: #FAFAFA;

padding: 10px 40px 60px;

margin: 10px 0px 60px;

border: 1px solid GREY;

}

</style>

j$ = jQuery.noConflict();

j$(document).ready(function(){

alert("test");

j$('#characterLeft').text('140 characters left');

j$('#message').keydown(function () {

var max = 140;

var len = j$(this).val().length;

if (len >= max) {

j$('#characterLeft').text('You have reached the limit');

j$('#characterLeft').addClass('red');

j$('#btnSubmit').addClass('disabled');

}

else {

var ch = max - len;

j$('#characterLeft').text(ch + ' characters left');

j$('#btnSubmit').removeClass('disabled');

j$('#characterLeft').removeClass('red');

}

});

</script>

</head>

<apex:form >

<h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>

</div>

</div>

</div>

</div>

<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>

</div>

<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button> </center>

</div>

</apex:form>

</apex:page>

Example 2 :

In this example i am using Bootstrap CDN reference's . this is similar to above example, but using 2 div's displaying label and text boxes.

<apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false">

<html>

<head>

<style>

.red{

color:red;

}

.form-area

{

background-color: #FAFAFA;

padding: 10px 40px 60px;

margin: 10px 0px 60px;

border: 1px solid GREY;

}

</style>

j$ = jQuery.noConflict();

j$(document).ready(function(){

alert("test");

j$('#characterLeft').text('140 characters left');

j$('#description').keydown(function () {

var max = 140;

var len = j$(this).val().length;

if (len >= max) {

j$('#characterLeft').text('You have reached the limit');

j$('#characterLeft').addClass('red');

j$('#btnSubmit').addClass('disabled');

}

else {

var ch = max - len;

j$('#characterLeft').text(ch + ' characters left');

j$('#btnSubmit').removeClass('disabled');

j$('#characterLeft').removeClass('red');

}

});

</script>

</head>

<br/>

<label class="col-md-4 control-label" for="textinput">Contact Name</label>

</div>

<label class="col-md-4 control-label" for="textinput">Company Name</label>

</div>

<label class="col-md-4 control-label" for="prependedtext">Email</label>

</div>

<label class="col-md-4 control-label" for="prependedtext">Phone</label>

</div>

<label class="col-md-4 control-label" for="selectbasic">Priority</label>

<option value="Medium">Medium</option>

</select>

</div>

<option value="Product Problem">Product Problem</option>

<option value="Software Request">Software Request</option>

<option value="Bug Request">Bug Request</option>

</select>

</div>

<label class="col-md-4 control-label" for="textinput">Subject</label>

</div>

<label class="col-md-4 control-label" for="textinput">Description</label>

<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>

</div>

<button type="submit" name="submit" id="submit" class="btn btn-primary pull-ledt">Submit Form</button>

</center>

</div>

</fieldset>

</form>

</html>

</apex:page>

Example 3:

This is advance example using bootstrap displaying Account record information and related contacts with create new contact functionality similar like lightning approach.

for this you need to pass account id in the url parameter like

https://c.ap2.visual.force.com/apex/BootstrapModal?id=0012800000LhxPy

Controller Class:

public class BootstrapModal_Controller {

string accId;

public List<Contact> contactList {get; set;}

public Account acc {get; set;}

public Contact singleCon {get; set;}

public BootstrapModal_Controller(ApexPages.StandardController sc){

acc = [SELECT Id, Name, OwnerId, Type, Website FROM Account WHERE Id =: sc.getId()];

contactList = [SELECT Id, Email, FirstName, LastName, Phone FROM Contact WHERE AccountId =: acc.Id];

singleCon = new Contact();

}

public void addContact(){

singleCon.AccountId = acc.Id;

insert singleCon;

contactList.add(singleCon);

singleCon = new Contact();

}

Visualforce Page:

<apex:page standardStylesheets="false" standardController="Account" extensions="BootstrapModal_Controller" title="Popup Example" applyBodyTag="false" sidebar="false" showHeader="false">

<head>

<style>

.container-fluid {

margin-top: 10px;

}

</style>

</head>

<body>

<apex:form >

<div class="panel-heading">Account Information</div>

<label for="aName">Account Name</label>

<br />

<apex:outputField value="{!acc.Name}" />

</div>

<label for="aOwner">Owner</label>

<br />

<apex:outputField value="{!acc.OwnerId}" />

</div>

<label for="Type">Account Type</label>

<br />

<apex:outputField value="{!acc.Type}" />

</div>

<label for="Website">Website</label>

<br />

<apex:outputField value="{!acc.Website}" />

</div>

Related Contacts

<span class="glyphicon glyphicon-plus-sign" /> New

</button>

</div>

</button>

<h4 class="modal-title" id="myModalLabel">New Contact</h4>

</div>

<label>First Name</label><br />

<apex:inputField value="{!singleCon.FirstName}" html-placeholder="First Name" styleClass="form-control"/>

</div>

<apex:inputField value="{!singleCon.LastName}" html-placeholder="Last Name" styleClass="form-control"/>

</div>

<label>Email</label><br />

<apex:inputField value="{!singleCon.Email}" html-placeholder="Email Address" styleClass="form-control"/>

</div>

<label>Mobile</label><br />

<apex:inputField value="{!singleCon.Phone}" html-placeholder="Mobile Number" styleClass="form-control"/>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<apex:commandButton styleclass="btn btn-primary" value="Save" action="{!addContact}" reRender="contactTable" onComplete="$('#myModal').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();"/>

</div>

<apex:outputPanel id="contactTable">

<tr>

<th>First Name</th>

<th>Email</th>

<th>Mobile</th>

</tr>

<apex:repeat value="{!contactList}" var="con">

<tr>

<td>

<apex:outputField value="{!con.FirstName}" />

</td>

<td>

<apex:outputField value="{!con.LastName}" />

</td>

<td>

<apex:outputField value="{!con.Email}" />

</td>

<td>

<apex:outputField value="{!con.Phone}" />

</td>

</tr>

</apex:repeat>

</table>

</apex:outputPanel>

</div>

</apex:form>

</body>

</apex:page>

Example 4:

<apex:page docType="html-5.0" showHeader="false" sidebar="false">

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Your description here"/>
<meta name="author" content="Your Name"/>
<title>Learning Boostrap</title>


<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrap.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/basic-template.css')}" />


<apex:stylesheet value="{!URLFOR($Resource.BootStrapValidator, '/css/bootstrapValidator.min.css')}" />



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





<style>
.myEmail{}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Registration</div>
<div class="panel-body">
<form id="registration-form" class="form-horizontal" >
<div class="form-group">
<label class="col-md-2 control-label" for="email">Email Address</label>
<div class="col-md-4">
<input type="text" class="form-control" id="email" name="email" placeholder="Your email address" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="password">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="confirmpassword">Confirm Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Confirm password" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="membership">Membership</label>
<div class="col-md-4">
<select class="form-control" id="membership" name="membership">
<option value="0">Choose One</option>
<option value="1">Basic (Free)</option>
<option value="2">Premium (Paid)</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
<div id="confirmation" class="alert alert-success hidden">
<span class="glyphicon glyphicon-star"></span> Thank you for registering
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#registration-form").bootstrapValidator({
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
email :{
message : "Email address is required",
validators : {
notEmpty : {
message : "Please provide an email address"
},
stringLength: {
min : 6,
max: 35,
message: "Email address must be between 6 and 35 characters long"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
password : {
validators: {
notEmpty : {
message : "Password is required"
},
stringLength : {
min: 8,
message: "Password must be 8 characters long"
},
different : {
field : "email",
message: "Email address and password can not match"
}
}
},
confirmpassword : {
validators: {
notEmpty : {
message: "Confirm password field is required"
},
identical : {
field: "password",
message : "Password and confirmation must match"
}
}
},
membership : {
validators : {
greaterThan : {
value: 1,
message: "Membership is required"
}
}
}
}
});

validator.on("success.form.bv", function (e) {
e.preventDefault();
$("#registration-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
});

});
</script>
</html>
</apex:page>