Aligning text to the right in a table using Bootstrap - css

Question

As part of my experimentation in learning Bootstrap, I created a table without actually using any of the tags that correspond to making a table. Instead, I used the grid system. While it looks decent, I was wondering if there was a way to align the numbers to the right? I have provided a JSFiddle link to show you what I came up with. Any help or leads are appreciated.
https://jsfiddle.net/silosc/9jbd1rpw/2/
<div class="container-xl">
<div class="report-card-weekly-report">
<div class="CompanyName">
<h1>Weekly Summary for John's Groceries</h1>
<h4> Week Ending: 01/20/2010</h4>
</div>
<br />
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<p>Number of Sales</p>
</div>
<div class="col-sm-2">
<p>Total earnings</p>
</div>
<div class="col-sm-2">
<p>Taxes charged</p>
</div>
<div class="col-sm-2">
<p>Refunds</p>
</div>
<div class="col-sm-2">
<p>Deliveries</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2>Total numbers</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<p>Numbers for the week</p>
</div>
<div class="col-sm-2">
21,922
</div>
<div class="col-sm-2">
$0.00
</div>
<div class="col-sm-2">
$304,431.37
</div>
<div class="col-sm-2">
$0.00
</div>
<div class="col-sm-2">
$0.00
</div>
</div>
</div>
</div>
<style>
.CompanyName {
text-align: center;
}
h2 {
color: orangered;
margin-left: 15px;
}
p {
font-weight: bold;
font-size: 15px;
margin-left: 15px;
}
p1 {
text-align: right;
}
</style>

Answer 1

You can use the text-right property of bootstrap to align your desired text to the right. Here is a small piece of code to show you how it will work in your example.
<div class="col-sm-2 text-right">
21,922
</div>
similarly, you can also align the text to left with text-left property.

Answer 2

You can use the text-right class of bootstrap:
<div class="container-xl">
<div class="report-card-weekly-report">
<div class="CompanyName">
<h1>Weekly Summary for John's Groceries</h1>
<h4> Week Ending: 01/20/2010</h4>
</div>
<br />
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
<p>Number of Sales</p>
</div>
<div class="col-sm-2">
<p>Total earnings</p>
</div>
<div class="col-sm-2">
<p>Taxes charged</p>
</div>
<div class="col-sm-2">
<p>Refunds</p>
</div>
<div class="col-sm-2">
<p>Deliveries</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2>Total numbers</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<p>Numbers for the week</p>
</div>
<div class="col-sm-2 text-right">
21,922
</div>
<div class="col-sm-2 text-right">
$0.00
</div>
<div class="col-sm-2 text-right">
$304,431.37
</div>
<div class="col-sm-2 text-right">
$0.00
</div>
<div class="col-sm-2 text-right">
$0.00
</div>
</div>
</div>
</div>
<style>
.CompanyName {
text-align: center;
}
h2 {
color: orangered;
margin-left: 15px;
}
p {
font-weight: bold;
font-size: 15px;
margin-left: 15px;
}
p1 {
text-align: right;
}
</style>
See the JsFiddle here.