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
Laurie DrewLaurie Drew 

Help with Styling in Lightning Component

Can you tell me how I would then make Tab 1-4 SubField1 - SubField 12 and SubField2-1 - 2-2 bold in the following code?

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 <lightning:tabset selectedTabId="{!v.selTabId}" >
        
        <lightning:tab label="Tab 1" id="1">
            <div class="c-container">
        <lightning:layout >
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <div class="slds-text-heading_medium">
                        <p class="field-title" title="SubField1">SubField1</p>
                    </div>    
                        <p>Data</p>
                </div>
                <br/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="SubField2">SubField2</p>
                    <p>*Other</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField3">SubField3</p>
                    <p>N/A</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField4">SubField4</p>
                    <p>No</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField5">SubField5</p>
                    <p>N/A</p>
                </div>
                
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="SubField6">SubField6</p>
                    <p>No</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="Gluten-Free">Gluten-Free</p>
                    <p>No</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField7">SubField7</p>
                    <p>Yes</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField8">SubField8</p>
                    <p>No</p>
                </div>
                <br/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="SubField9">SubField9</p>
                    <p>No</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField10">SubField10</p>
                    <p>Aisle 0</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField11">SubField11</p>
                    <p>Yes</p>
                </div>
                <br/>
                <div class="header-column">
                    <p class="field-title" title="SubField12">SubField12</p>
                    <p>No</p>
                </div>
                <br/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="SubField13">SubField13</p>
                    <p>No</p>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>      
    
        </lightning:tab>
        
        <lightning:tab label="Tab2" id="2">
            <lightning:layout >
            <lightning:layoutItem padding="around-small">
                <div class="slds-panel slds-size_medium slds-panel_docked slds-is-open slds-size--7-of-8" aria-hidden="false">
                    <table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered">
                       <thead>
                      <tr class="slds-line-height_reset">
                          <th class="" scope="col">
                            <div class="slds-truncate" title="SubField2-1">SubField2-1</div>
                          </th>
                          <th class="" scope="col">
                            <div class="slds-truncate" title="SubField2-2">SubField2-2</div>
                          </th>
                      </tr>
                       </thead>
                <br/><br/>            
            </table>
            </div>
            </lightning:layoutItem>
            </lightning:layout> 
        </lightning:tab>
        
        <lightning:tab label="Tab3" id="3">
           
        </lightning:tab>
        
        <lightning:tab label="Tab4" id="4">
           
        </lightning:tab>
   
    </lightning:tabset>    
</aura:component>

I tried this for my CSS:

.THIS.slds-text-heading--large 
    {
        font-weight:bold;
    }
.THIS.header-column
    {
        font-weight:bold;
    }
.THIS.slds-truncate
    {
        font-weight:bold;
    }
Best Answer chosen by Laurie Drew
Ajay K DubediAjay K Dubedi
Hi Laurie,
I have gone through your code, please go through the following points:
1. Using custom CSS:
Using CSS for main div or main tag(First tag) is done like this:
    .THIS.classname {} //no spacing.

    But when the tag is not the main tag you have to add space like:
    .THIS .classname

So first try replacing your css like:
"this" .THIS.slds-text-heading--large "with" .THIS .slds-text-heading--large 
    
2. Further for the bold text, you can also use the bold tag like <b>Somnetext</b>

3. Define a class on <p> tag you want to make bold and define css like this:
        <p class="className">SomeText</p>
        .THIS .className {
            font-weight: bold;
        }

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi