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
Kent Lichty 11Kent Lichty 11 

How to right justify constant text in slds grid

I am writing a simple LWC page using SLDS grid with lightning-output-fields and is uses a lot of numeric fields, which I want to right justify within the grid cell.  I use this technique to right align the numeric variables within the grid like this, which works fine:

<div class="slds-col--padded slds-size_1-of-6">
                <lightning-output-field  field-name="Team_Sales_Quarter4__c" variant="label-hidden" style="float:right">
                </lightning-output-field>
 </div>

However, I am using hardcoded text as my column headings, and I cannot figure out a good way how to right align those column headings so that they line up nicely with the numbers underneath them. The only way I can do this is to use a LOT of &nbsp tags, which I know is horribly bad form, and it looks like this:

<div class="slds-col--padded slds-size_1-of-6">              <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quarterly Sales</b>
</div>

I know that there are "align" tags in the SLDS grid system, but those tags seem to apply to the alignment of the grids themselves, and NOT the contents within those grids.

I think that there MUST be a better way to handle this (probably using CSS, which I don't know well), so I would really appreciate any advice that could be offered.

Thanks very much.
AbhishekAbhishek (Salesforce Developers) 
https://www.lightningdesignsystem.com/utilities/grid/


Check this also,
https://www.lightningdesignsystem.com/utilities/text/


It might help you.