use Bootstrap

How To Use Bootstrap Framework In Lightning Component !

Lightning Component
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 :

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)
  • 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 :¬†

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]
<aura:component >
  <!--use bootstrap css and jQUERY file in lightning component by using ltng:require component-->
    <ltng:require styles="{! $Resource.boostrap337 + '/bootstrap-3.3.7-dist/css/bootstrap.min.css'}" 
        $Resource.jquery224 , 
        $Resource.boostrap337 + '/bootstrap-3.3.7-dist/js/bootstrap.min.js')
      }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
   <!--To ensure proper rendering and touch zooming using below meta tag--> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <div class="container">
       <!--Display Navigation menu part-->  
      <ul class="nav nav-tabs">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Menu 1</a></li>
         <li><a href="#">Menu 2</a></li>
         <li><a href="#">Menu 3</a></li>
      <!--Display Buttons part-->  <br/>  
      <button type="button" class="btn btn-default">Default</button>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-link">Link</button>
       <!--Display Collapse Button part-->  <br/> <br/>
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
      <div id="demo" class="collapse">
         this part is controll by the Simple collapse Button 
       <!--Display glyphicon icon part-->  <br/>
      <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
       <!--Display Progress bar part-->  <br/>   
      <div class="progress">
         <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
       <!--Display table part-->  <br/>
      <table class="table table-striped">
               <td>[email protected]</td>
               <td>[email protected]</td>
               <td>[email protected]</td>
       <!--Display pagination part-->  <br/>
      <ul class="pagination">
         <li><a href="#">1</a></li>
         <li class="active"><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
       <!--Display Model part-->  <br/>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
      <!-- Modal -->
      <div id="myModal" class="modal fade" role="dialog">
         <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header</h4>
               <div class="modal-body">
                  <p>Some text in the modal.</p>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
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
     styles="{! $Resource.boostrap337 + '/bootstrap-3.3.7-dist/css/bootstrap.min.css'}"
  • 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
            $Resource.jquery224 , 
            $Resource.boostrap337 + '/bootstrap-3.3.7-dist/js/bootstrap.min.js')
  • 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]
	scriptsLoaded : function(component, event, helper) {
		console.log('javaScript files loaded successful'); 
Lightning App []
<aura:application >
  <!-- here c: is org. namespace prefix-->

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. ?


  • Hi

    I know very brief idea on bootstrap and jquery. In ur article how to use bootstrap in lightning component, I dont understand how to use the classes ”¬†table table-striped”. where does this class come from and how do we know what type of class to use? cud u pls explain, its confusing for me…

    • hi Pooja Biswas,
      Don’t get confused with those classes, this is all bootstrap standard classes, which is applying after add bootstrap library to your lightning component.
      to understand these classes you must first learn to bootstrap. it’s very easy to learn for
      for the above example i use “table table-striped”.The .table-striped class adds zebra-stripes to a table.
      you can find it in bootstrap tutorial on table chapter.
      Hopes it helps you ūüôā

    • Hi Sudha,
      It’s mean your Bootstrap Library not loading correctly,
      can you share your component code so i can review it

  • Hi Great Tutorial, VERY HELPFUL… however, there appears to be an issue when dropping a simple SLDS grid designed component into the content area on the same page. Discovered that SLDS and Boostrap Scripts and CSS do not co-exist very well.. Name Spacing does not seem to resolve.

    Question: Is there a way, to force “Isolate” a SLDS designed components from the injected bootstrap.js and boostrap css?¬† In other words, how can you make an “existing” SLDS grid component co-exist with bootstrap framework on lightning component?

    If you know of a way, please share a sample code snippet and example.


  • Tried but $Resource throw error and also some where read¬† ”

    You cannot use the¬†{!$Resource.resourceName}¬†expression because we are not inside a VisualForce page, so you have to simply refer to ‚Äú/resource/[resourceName]‚ÄĚ in your¬†<script>¬†tag”

    Kindly suggest

  • Hi I have tried to use the Bootstrap in the same way in my component which I’m calling from lightning action, but it seems that after bootstrap loads it distorts the layout even the standard layout gets mishap in the back of the modal

Leave a Reply