You need to sign in to do that
Don't have an account?
Laurie 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.
<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.
<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
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
<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;
}
<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