function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Gitesh Sonavane 6Gitesh Sonavane 6 

Can i use lightning design system and bootstrap both in lightning component?

I am implementing lightning design system and bootstrap at the same time in lightning component, But unable to get the desired UI in responsive mode. 
Can i use both in lightning component.
Piyush Kumar 58Piyush Kumar 58
Hello Gitesh,

Yes you can use both lightning desing system and bootstrap  in your lightning component.

Thanks
Mustafa JhabuawalaMustafa Jhabuawala
You can use both.

But why to use both. Lightning also provides all the features that you can develop using bootstrap. 

For responsiveness follow the proper structure of the lightning and you can achieve responsive design.

If you are more familiar to bootstrap then you might be using class row and then inside it col-md-5 etc.. You can achieve the same in lightning by using lightning grid system.

In case you find this helpfull. Mark this as a best answer to help others.
Gitesh Sonavane 6Gitesh Sonavane 6
I am facing an issue while applying my custom css to Lightning Design System(LDS) datepicker. I am unable to apply custom css to the datepicker selected class. Also when i use both bootstrap and lightning design system the lightning UI controls gets distorted.
Here is my code:

Component.
<aura:component implements="force:appHostable" access="global" 
                controller="QuestionAnswersClass">        
    <ltng:require scripts="/resource/jquery1_11,/resource/Bootstrap/js/bootstrap.min.js"
                  styles="/resource/LDS102,/resource/Bootstrap/css/bootstrap.min.css" />
    <aura:attribute name="pollQuestion" type="String"/>
    <aura:attribute name="pollVisibility" type="String"/>
    <aura:attribute name="pollQuestionObj" type="Polling_Question__c" default="{'sobjectType': 'Polling_Question__c'}"/>
    <aura:attribute name="visibleTo" type="String[]" default="Admin,Everyone"/>
    
    <aura:attribute name="message" type="String"/>
    
        <div class="slds form-element__group pollQuestionFrm col-md-12">        
            <p class="slds-page-header pollingTitle" role="banner">Add Poll Question</p>
            <form>
               <div class="col-md-6 ">
                  <div class="col-md-12">
                  	<ui:inputText label="Question" class="slds-input" aura:id="question" placeholder="Enter Poll Question" value="{!v.pollQuestionObj.Question__c}" required="true"/>                                                           
                  </div> 
                  <div class="col-md-12">
                   <ui:inputDate aura:id="startDt" class="slds-input" label="Start Date" value="{!v.pollQuestionObj.Start_Date__c}" displayDatePicker="true" />
                  </div>  
				  <div class="col-md-12">  
                    <ui:inputDate aura:id="endDt" class="slds-input" label="End Date" value="{!v.pollQuestionObj.End_Date__c}" displayDatePicker="true" />                        
				  </div>
                  <div class="col-md-12">                   
                  	<ui:inputDate aura:id="resultVisibleDt" class="slds-input" label="Result Visible From Date" value="{!v.pollQuestionObj.Result_from_Date__c}" displayDatePicker="true" />
                  </div>  
                </div> 
                <div class="col-md-6 " > 
                    <div class="col-md-12">   
                          <ui:inputSelect aura:id="visTo" class="slds-input" label="Visibility" change="{!c.visibleToUser}" value="{!v.pollVisibility}">
                                <aura:iteration items="{!v.visibleTo}" var="vsbl"> 
                                    <aura:if isTrue="{!index ==0}" >
                                        <ui:inputSelectOption text="{!vsbl}" value="true"/>
                                        <aura:set attribute="else">
                                            <ui:inputSelectOption text="{!vsbl}"/>
                                        </aura:set>
                                    </aura:if>
                                </aura:iteration>
                           </ui:inputSelect> 
                       </div>  
                       <div class="col-md-12"> 
                           <ui:inputSelect aura:id="options" class="slds-input" label="Number of options" change="{!c.onSelectChange}">
                               <aura:iteration items="1,2,3,4" var="item" indexVar="index">
                                   <aura:if isTrue="{!index ==0}" >
                                       <ui:inputSelectOption text="{!item}" value="true"/>
                                       <aura:set attribute="else">
                                           <ui:inputSelectOption text="{!item}"/>
                                       </aura:set>
                                   </aura:if>
                               </aura:iteration>
                           </ui:inputSelect> 
                       </div>   
                       <div class="col-md-12">
                           <div id='OptionGroup' class="slds-input">
                               <div id="OptionDiv1">
                                   <label>Option #1 : </label><input type='textbox' id='option1' />
                               </div>
                           </div>
                        </div>
                  </div>                
                  <div class="submitBtn col-md-12">
                     <button press="{!c.addQuestion}" class="btn btn-primary btnSubmit">Submit</button>
                  </div>

            </form>
       </div>   
</aura:component>

CSS.
 
/************************ Add question component css ******************************/
.cPollQuestionForm .pollQuestionFrm{
   margin-left: 5px;
}

.cPollQuestionForm .form{
    padding: 20px;
}

.cPollQuestionForm .slds-input {
    width: 50% !important; 
    
}

.cPollQuestionForm label {
    display: block;
}

.cPollQuestionForm .selectOption {
    margin-bottom: 5px;
    
}

.cPollQuestionForm .optionButton {
    margin-bottom: 5px;
    
}

.cPollQuestionForm .pollingTitle {
    text-align: center;
    font-weight: bold;
}

.cPollQuestionForm .submitBtn{
    /*position: absolute;*/
    /*left: 40%;*/
    padding-top: 10px;
    text-align: center;
}

.cPollQuestionForm .btnSubmit{
    color: #fff !important;
    background-color: #E77070 !important;
    border: 1px solid #E77070;
}

.cPollQuestionForm .btnSubmit:hover{
    color: #fff !important;
    background-color: #AD4646 !important;
    border: 1px solid #AD4646;
}


@media only screen and (max-width: 480px) {
	.cPollQuestionForm .slds-input {
    	width: 100% !important; 
    }
    
    .cPollQuestionForm .txtButton{
    	text-align: center;
    }
}

ChicloudChicloud
You definately can use both. Lightening is no where near as mature as bootstrap. You'd probably have to customize the heck out of the slds classes to build a 'real' app that is heavy on data and user inputs. For instance. even the smallers of slds buttons and form inputs are too big for our real world apps. Our users need to be able to see as much information as possible on a single screen without clicking / scrolling.
 
Aaron Bailey 5Aaron Bailey 5
I'm also trying to implement Bootstrap in a Lightning Component, but there is a scoping problem and the Bootstrap styles are somehow affecting the one.app container. I've done some research on how to scope Bootsrap manually, but that is not a good maintainable process.

Also, to those who think SLDS is the same as Bootstrap, you must not be very familiar with Bootstrap. Bootstrap has short class names which makes it easy to read and more maintainable. Bootstrap works off of the idea that you have rows and then cols within the rows. SLDS is awful to read and uses columns first, then rows. I don't know anyone who thinks cols first outside of slds. -Just my 2 cents
NehashriNehashri
Hi,
I am also trying to use Bootstrap in Lightning because I am building a component which is using the lightning table to list out few rows and it is for mobile. But lightning data table is desktop only, this was a surprise. So it is not mobile friendly. the table looks cramped in the mobile. So I wanted to see if there are any consequences on using Bootstrap in lightning component.
Please let me know.
Thanks