I Need Help with aligning 8 cards in a single row. Each card should display Average, Range, Min, and Max data.
What I've Tried So Far I have tried the following code:
<div class="row">
<div class="col">
<!-- Card 1 -->
</div>
<div class="col">
<!-- Card 2 -->
</div>
<div class="col">
<!-- Card 3 -->
</div>
<div class="col">:
<!-- Repeat for Cards 4-8 -->
</div>
</div>
However, this code is resulting in distorted display, as shown in the image below. I am facing issues with extra padding between/within each card, causing some elements to go out of the card boundaries when trying to remove the padding.
Please assist me in achieving proper alignment of the cards in the same row. https://i.sstatic.net/NfPci.png
The expected output design of the card is visible in the image linked below
https://i.sstatic.net/PZRLQ.png
Updated Code Following Suggestions by Nisharg Shah
<div class="row">
<div class="col px-1">
<!-- Updated Card Layout Here -->
</div>
<div class="col px-1">
<!-- Repeat Updated Card Layout for remaining cards -->
</div>
</div>
This code displays the cards properly aligned, as shown in the image https://i.sstatic.net/ubFeX.png
I would like to resize the top icon and remove the extra space above the footer as indicated by the green arrows in the image. Your guidance on this matter would be greatly appreciated.