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 

How do I make the header and subHeader bold?

Hi new to coding, I have built the following page and cannot figure out how to make the Heading, SubHeading display bold.  Here is my component and style sheet that are not working:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="selTabId" type="string" default="1" />
    <aura:attribute name="PageHeading" type="String" default="Store 158 - A2 Reduced Fat 2% Milk"/>
    <aura:attribute name="PageSubHeading" type="String" default="Product Images"/>
    
    
    <div class="slds-text-heading--large">{!v.PageHeading}</div>
    <br/><br/>
    <div class="slds-text-heading--large ">{!v.PageSubHeading}</div>
    <br/><br/>

</aura:component>

Here is my CSS:

.THIS .slds-text-heading--large {
     font-weight: bold;
    }

I greatly appreciate any help that can be provided.
Best Answer chosen by Laurie Drew
Maharajan CMaharajan C
Sorry for the late reply laurie: You can simply use the <b> tag in your component like below.

<p class="field-title" title="SubField1"><b>SubField1</b></p>                          

<div class="slds-truncate" title="SubField2-1"><b>SubField2-1</b></div>

or 

you can use the below style:

.THIS .field-title{
    font-weight: bold;
}

Mark as a best Answer if it's helps !!!

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Laurie,

Remove the space between THIS and .slds . This will solve your issue.

.THIS.slds-text-heading--large {          //  Don't give any space here
     font-weight: bold;
    }

Thanks,
Maharajan.C
Laurie DrewLaurie Drew
Thank you Maharajan!  Adding to that 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;
    }
Maharajan CMaharajan C
Sorry for the late reply laurie: You can simply use the <b> tag in your component like below.

<p class="field-title" title="SubField1"><b>SubField1</b></p>                          

<div class="slds-truncate" title="SubField2-1"><b>SubField2-1</b></div>

or 

you can use the below style:

.THIS .field-title{
    font-weight: bold;
}

Mark as a best Answer if it's helps !!!

Thanks,
Maharajan.C
This was selected as the best answer
Brajesh TiwaryBrajesh Tiwary
If you have added the style code as suggested earlier and using the same class everywhere i.e  "field-title" then the text will automatically be bold.