[SalesForce] How to Style a Lightning Component with Bootstrap Styling

I have a question regarding styling Lightning components. On several occasions lately, I have found myself having to opt for the use of a standard HTML tag styled with bootstrap on which I call core Javascript methods instead of the native Lightning ones. The reason for this is a lot of the native Lightning component styling doesn't look as good as the Bootstrap styling. I am wondering if there is a way to simply style a native Lightning component like <ui:inputSelect> to look like something like this instead of the native style that looks more bland and gray, at least on the desktop app.

I would like to keep the functionality of using cmp.get("v.options") to get the component options and use the functions mentioned here to populate the list dynamically using Lightning patterns, but I'm stuck on the styling aspect, providing that I don't reapply each individual bootstrap CSS property one-by-one.

Best Answer

I will recommend not to style it with bootstrap instead use lightning design system. So, that your component looks consistent with rest of the app. However, if you wan to use bootstrap use

<ltng:require styles="{!$Resource.resourceName}" />

or if you want to use multiple file then

styles="{!join(',', 
    $Resource.myStyles + '/stylesheetOne.css', 
    $Resource.myStyles + '/moreStyles.css')}"

Please refer to following article for more information.

Related Solutions

[SalesForce] Lightning components in Community requires SLDS package

Community Cloud is based on Standard SLDS Design .But since you are building a custom component its better to import the SLDS package and use Standard SLDS in static resource so that you have complete control over the CSS and not rely on salesforce designs which will be upgraded with every release and that may tend to be not desired.

<aura:component implements="forceCommunity:availableForAllPageTypes" controller="HomePageCmpController">
<ltng:require styles="/resource/REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE/assets/styles/salesforce-lightning-design-system-ltng.css" />

[SalesForce] Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

So here is my two cents

Note Per comments this does not seem to completely answer the question as OP is looking to keep classic look while providing a look that also appears well under Lightning using a single solution.

For VF components that you want to style as SLDS without having to modify the controller you need to de-componetize them. Adding styles after the DOM has been rendered as pointed out above is not great because it relies on implementation level details you have no control over. Not to mention it is just hacky...

Also, VF components just do a lot of the work for us. Unfortunately, with SLDS we are again going to need to do much of the HTML work ourselves but it is not really that bad.

Using a template approach like mentioned What is suggested approach to transfer VF pages to be lightning ready

So the idea for the code you posted would be to:

Pageblocktable becomes an HTML table
Use an apex repeat to build the table rows using the controller variable
Use an input/output field with the appropriate slds styleclass in each table row

You can maintain controller and page functionality while doing this.

Bottom line is you will need to break these compound tags into HTML elements. Simple tags like input field can be used as is with the appropriate styleclass and surrounding HTML elements thus allowing you to keep built in functionality

Original Markup

<apex:page standardController="Contact" recordSetVar="cs">
    <div class="slds cv">
        <apex:form>
            <apex:sectionHeader title="{!$ObjectType.Contact.labelPlural}" subtitle="All"/>
            <apex:pageMessages />
            <apex:pageBlock title="{!$ObjectType.Contact.labelPlural}">
                <apex:pageBlockTable value="{!cs}" var="c">
                    <apex:column value="{!c.FirstName}"/>
                    <apex:column value="{!c.LastName}"/>
                    <apex:column value="{!c.Birthdate}"/>
                    <apex:column value="{!c.CreatedDate}"/>
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:form>
    </div>
</apex:page>

Output

SLDS Pageblock / Pageblocktable Markup

A bit more markup but the way it is done ensures that it continues working and does not rely on the "implementation level details" of the old VF components

<apex:page id="dummySLDSPage" standardController="Contact" recordSetVar="cs" showHeader="false"
           standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

    <head>

        <apex:stylesheet
                value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"/>

    </head>


    <div class="SLDS">

        <body>

        <apex:form>
            <apex:pageMessages/>

            <!-- Replaces the Standard Pageblock Table Header-->
            <div class="slds-page-header" role="banner" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                <div class="slds-grid">
                    <div class="slds-col">
                        <div class="slds-media slds-no-space slds-grow">
                            <div class="slds-media__figure">
                                <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact">
                                    <use xlink:href="{!URLFOR($Resource.AppFrontier_Assets, '/assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
                                </svg>
                            </div>
                            <div class="slds-media__body">
                                <p class="slds-text-title--caps slds-line-height--reset">{!$ObjectType.Contact.labelPlural}</p>
                                <p class="slds-page-header__title slds-truncate"
                                   title="ALL">ALL</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Replaces the Pageblocktable Table -->
            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
                <!-- Use a caption if desired
                    <caption class="slds-text-heading&#45;&#45;label slds-p-bottom&#45;&#45;medium">{!$ObjectType.Contact.labelPlural}</caption>
                -->
                <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.FirstName.Label}">
                                {!$ObjectType.Contact.fields.FirstName.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.LastName.Label}">
                                {!$ObjectType.Contact.fields.LastName.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.BirthDate.Label}">
                                {!$ObjectType.Contact.fields.BirthDate.Label}
                        </div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="{!$ObjectType.Contact.fields.CreatedDate.Label}">
                                {!$ObjectType.Contact.fields.CreatedDate.Label}
                        </div>
                    </th>

                </tr>

                </thead>
                <tbody>
                <apex:repeat value="{!cs}" var="c"> <!-- Build the columns -->
                    <tr>
                        <th scope="row" data-label="{!$ObjectType.Contact.fields.FirstName.Label}">
                            <div class="slds-truncate" title="{!c.FirstName}">
                                <apex:outputField value="{!c.FirstName}"/> <!-- Standard VF component -->
                            </div>
                        </th>
                        <td data-label="{!c.LastName}">
                            <div class="slds-truncate"
                                 title="{!c.LastName}">
                                <apex:outputField value="{!c.LastName}"/>
                            </div>
                        </td>
                        <td data-label="{!c.Birthdate}">
                            <div class="slds-truncate"
                                 title="{!c.Birthdate}">
                                <apex:outputField value="{!c.Birthdate}"/>
                            </div>
                        </td>
                        <td data-label="{!c.CreatedDate}">
                            <div class="slds-truncate"
                                 title="{!c.CreatedDate}">
                                <apex:outputField value="{!c.CreatedDate}"/>
                            </div>
                        </td>
                    </tr>
                </apex:repeat>
                </tbody>
            </table>

        </apex:form>


        </body>

    </div>
</apex:page>

Output

The general idea would apply to the rest of the items you would like to convert. You could even go so far as spending a bit of time to make VF Components that are done in SLDS styling and used to replace existing VF components. If the project is large this could be beneficial as it would save a lot of time.

Maybe I should put a package of reusable replacement SLDS components for VF components together...hmm...There is already a library out there but it had way too much overhead and really hacked the styling.

Some additional resources:

VF SLDS Checkbox: SLDS and inputField checkbox

VF SLDS Lookup with autocomplete: Lookup Field Dual Keyboard Focus (Answered with working Autocomplete lookup component and JS example for VF/SLDS)

VF SLDS Select Checkboxes: Convert apex:selectCheckboxes into slds style

VF Page Messages Replacement: How to convert a Visualforce apex:pageMessages to be lightning style

Best Answer

Related Solutions

[SalesForce] Lightning components in Community requires SLDS package

[SalesForce] Guidance on styling existing Visualforce pages adequately in Lightning Experience without major rework

Related Topic