Use bootstrap in visualforce page

Hi All,

This is a simple post which covers how to add and use bootstrap css in your Visualforce page.

There are some bootstrap related posts which you can read it here.

You will get to know how simple it is to achieve this after reading this post.

Steps to follow

  1. Add bootstrap css
  2. Use bootstrap css in Visualforce page

Add bootstrap css

You can add the bootstrap css in two ways 

  1. Static resource 
  2. 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

Hope this posts will help you too add external style sheet in your Visualforce page.

Let me know your thoughts in comment section.

Happy coding smiley

Rating: 
Average: 5 (2 votes)