Exploring Bootstrap, I challenged myself to create a table without the usual table tags, using only the grid system. While I managed to make it look decent, I'm struggling to align the numbers to the right. Here's a JSFiddle link to what I've come up with. Any guidance or suggestions would be greatly 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>