Use Bootstrap in lightning component

<aura:component implements="force:appHostable">
    <link href='/resource/1439362248000/heatspace__Bootstrap/bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.min.css' rel="stylesheet"/>
    
    <ui:inputDate aura:id="dateField" label="Date :" displayDatePicker="true" class="form-control"/>
	
</aura:component>

Hi geeky developers laugh,

Since I have been busy in developing and marketing this awesome community its been a while I have updated you guys with my blog posts.

Our community recently got a request to provide a code to include Bootstrap in Lightning components.

The request is as follows.

Name
chandan prusty

Category 
Blog topic suggestion

Message

We are trying to use Bootstrap in lightning app . But it's not working. Can anyone please share the code if they have done it?We are trying to use Bootstrap in lightning app . But it's not working. Can anyone please share the code if they have done it?
Submitted date
Wednesday, August 12, 2015 - 11:44

I have been working on lightning for last two to three months so  I thought of writing the post about it.

Bootstrap is one of the mostly used front end design and also my favorite one heart

Okay lets dive into it.

Let me break this down in simple steps 

  1. Get bootstrap

  2. Upload as static resource

  3. Include it in your lightning component

Get bootstrap 

Go to this link and click on Download button. A zip will be downloaded.

Upload as static resource

Upload the zip file to your static resource as shown in the below screen shot


Include in your lightning component

Open or create a lightning component and add the below lines


 

In the above code you should modify your the href of the link tag as described :

Copy the link from view file in static resource. It will look like this 

https://ap1.salesforce.com/resource/1439362248000/heatspace__Bootstrap

Remove everything before the /resource now it will look like this

/resource/1439362248000/heatspace__Bootstrap

Now point the url to the css file you want to include 

/resource/1439362248000/heatspace__Bootstrap/bootstrap-sf1-0.1.0-beta.15/dist/css/bootstrap.min.css

Here bootstrap-sf1-0.1.0-beta.15 is the folder inside the zip file  and /dist/css/bootstrap.min.css   points to the css file i want to include.

If everything goes correct your the user interface of the component will look like this 

 

Hope this will help you to include Bootstrap in your lightning components.

Please let me know in comments if have any doubts and hit on that heart button if you like this post. Happy coding !!! laugh 

Rating: 
Average: 1 (1 vote)