use Bootstrap

How To Use Bootstrap Framework In Lightning Component !

Lightning Component

Sharing is caring!

A sample lightning component with Bootstrap framework. use bootstrap
A sample lightning component with Bootstrap framework

What is The Bootstrap framework ?

  • Bootstrap is the most popular HTML, CSS, and JavaScript framework.
  • Using for developing responsive, mobile-first web pages.
  • Bootstrap completely free to download and use ! ūüôā
  • It’s makes front-end web development faster and easier.
  • It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.

 For full reference of bootstrap : http://www.w3schools.com/bootstrap/

How can i use Bootstrap framework on my Lightning component?

Step 1 : Download Bootstrap framework zip file. (Include Compiled and minified CSS, JavaScript, and fonts.)

download bootstrap file

  • Save the zip file on your computer.
  • In this zip file includes Compiled and minified CSS, JavaScript, and fonts.
Step 2 : Download jQuery  library.
  • Sometimes it is mandatory to have a jQuery file. Like you can get CSS buttons, colors and all from bootstrap itself, but for some components jquery is required like for toggle classes,modals etc. Without it some would work and some won’t ,so add JQuery library to you lightning component.
  • jQuery is NOT¬†included within the Twitter Bootstrap download – you must download it.
  • Go to below link for download JQuery 2.2.4 minified version. (2.2.4 My¬†Recommendation)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • For download jQuery file right click on the page and click on save as… link OR press CTRL + S button on keyboard.

  • Save the JS¬†file on your computer.
Step 3 : Upload zip file + jQuery file as a static resources in your Salesforce org.

Static resource is a file or collection of files that is stored on Salesforce. Once your bootstrap framework zip file and jQuery2.2.4 JS file  is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download both files¬†(bootstrap¬†zip + jQuery js file) now we will upload it as a static resources.
  • For upload zip file, from Setup, enter Static Resources in the Quick Find box, then select Static Resources, and click New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse. , and select bootstrap zip file you downloaded before.
  • In the Cache Control drop-down list, select Public.
  • Click on the Save button.

Follow same steps to upload both files.

upload bootstrap files
Bootstrap zip file upload

 

upload jQuery files
jQuery 2.2.4 JS file upload
Step 4 : Use Bootstrap framework on lightning component.

In this sample lightning component i’m using some HTML elements with Bootstrap CSS style Classes . for Learning Bootstrap :¬†http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

By the ltng:require tag in lightning component we can load external CSS and JavaScript libraries after we upload them as static resources.

Component [SampleComponent.cmp]

Description :
  • In the above lightning component first we are add Bootstrap CSS file and jQuery file by using ltng:require component.
  • for add CSS file using styles attribute i.e

  • Here boostrap337 is name of our zip file. and the /bootstrap-3.3.7-dist/css/bootstrap.min.css is the path of CSS file in zip folder.
  • For add scripts files using scripts¬†attribute.
  • We can add multiple scripts file by using join() function¬† ¬† i.e
  • Here¬†jquery224¬† is name of our jQuery file. with the single file we don’t have need to use .js¬†ext. .
  • Also boostrap337 is name of our zip file. and ¬†/bootstrap-3.3.7-dist/js/bootstrap.min.js¬†is the path of JS file in zip folder.
JS controller [sampleComponentController.js]

Lightning App [TestApp.app]

Output -:

use bootstrap

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box. ?

Sharing is caring!

(Visited 4,517 times, 1 visits today)

6 comments

Leave a Reply