Salesforce Bootstrap Integration

by Muralidhar Sampathirao 7 years ago 2 min read

Gone are the days when Enterprise Applications were more about functioning and there wasn't much attention paid to the UX. But with the advent of advanced UI frameworks like Twitter Bootstrap, Semantic UI, Kendo UI etc. the paradigm has shifted and now users are looking for a more user friendly and eye soothing UI.

What is Bootstrap?

The docs says:

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstraping Salesforce

Bootstraping Salesforce UI is simple and requires only a handful of steps from Salesforce end. Building enhanced UI using bootstrap framework is more of a Bootstrap stuff thereafter and all you need to do is go through the docs of bootstrap to build and style the UI components. We will see this with few demos.

First, download the Bootstrap framework using the Download Bootstrap link here. Do not alter any file or folder structure in the downloaded zip file.

Second, upload the zip file under Static Resources as shown below.

Static Resource for Twitter Bootstrap

Below is a simple VF page with a link and tooltip without Bootstrap

Simple VF page without Bootstrap

The same tooltip with bootstrap applied looks as shown below. Following is the code for the VF Page with the links for Bootstrap resources included.

Bootstrapped VF Page

Including Bootstrap Resources

The below code is all that is required from the Salesforce end to use the Bootstrap framework. Implementing Bootstrap components is then similar to creating any other bootstrapped HTML page by referring the docs.

...
<apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
<link href="{!URLFOR($Resource.bootStrap, 'bootstrap-3.3.6-dist/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
<apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.min.js')}"/>
...

Visualforce Page: Bootstraping_Salesforce

<apex:page >
  <apex:includeScript value="{!URLFOR($Resource.jquery)}"/>
  <link href="{!URLFOR($Resource.bootStrap, 'bootstrap-3.3.6-dist/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
  <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.min.js')}"/>

  <html>
   <head>
       <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
       </script>
   </head>
   <body>
    <!-- Begin Default Content REMOVE THIS -->
    <h1>Bootstraping Salesforce Demo</h1>
    <p></p>
    <a href="#" data-toggle="tooltip" data-placement="right" title="Check this simple tooltip. It is Bootstrapped ">Hover this link</a>
    <!-- End Default Content REMOVE THIS -->
   </body>
  </html>
</apex:page>

To see another example of Salesforce-Bootstrap you can read this article : Salesforce Lightning Component using Bootstrap

Muralidhar Sampathirao

Sr Technical Consultant @ Salesforce • Integration aficionado started Inteygrate to Explore, Adapt and Evolve with Cloud | Blockchain | AI | ML • Views and opinions expressed are those of the authors