My Requiremnet Align 8 cards in a single row. Each card to include 4 types of data say Average,Range,Min & Max.
What I have tried
The code I've tried for this is
<div class="row">
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
</div>
But it gives some distorted display as shown in the below image. I am not able to remove the extra padding\space between\within each card. If I remove the padding some of the items - icons, text... - go out of the card.
Please help me to make the cards aligned properly in the same row.
My expected output of the card is as shown in the below image
Updated code using answer from Nisharg Shah
<div class="row">
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" fas fa-clock"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Average</p>
<h6 class=" card-title">43.11</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-6">
<!-- <div class=" numbers"> -->
<p style="font-size: 10px;" class=" card-category">Range</p>
<h6 class=" card-title">26.87</h6>
<!-- </div> -->
</div>
<div class=" col-6">
<div class=" numbers">
<p style="font-size: 10px;" class=" card-category">Min</p>
<h6 class=" card-title">98.44</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" fa fa-car"> </i> Max
<span class="numbers">87.22</span>
</div>
</div>
</div>
</div>
</div>
This displays as shown in the below image
I want to make the top icon smaller and to remove the extra space between above footer marked in green arrows in the image. Please help
You can add px-1 class in all col classes, so it reduces the gap between cards.
px-1 = .5rem = 8px, If you want to reduce more gap, you can add custom CSS on all col classes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col px-1">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
<div class=" row">
<div class=" col-5">
<!-- <div class=" numbers"> -->
<p class=" card-category">Average</p>
<h6 class=" card-title">+45k</h6>
<!-- </div> -->
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h6 class=" card-title">+45k</h6>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Related
I want something like this, but there is some problems.
My code looks like:
<style>
.red{
background-color: red;
}
</style>
{% endblock stylesheets %}
{% block content %}
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-150 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-150 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="h-150 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
But result is in photo, without correction.
Each card is with title, context and icon. And context som times is longer then other which also breaks up my code.
How can I set height by each element responsive? And how to create this grid on all page height with bootstrap? What I need to modify in my code to get result what is in picture?
The h- class uses set percentages. If you want them to fill 100% of the available height, you just set it to h-100. The other side is the same way, so you can use whatever you want for that or you can do a custom percentage using CSS. h-150 isn't a valid use of these classes (remove it and you'll notice nothing changes, it just auto fits).
https://getbootstrap.com/docs/5.0/utilities/sizing/
.red {
background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container-flex m-3">
<div class="row">
<div class="col-sm">
<div class="d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">LONG TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
<h5 class=" card-text">TEXT</h5>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
<div class=" d-flex justify-content-around mb-3">
<div class="col-3">
<div class="h-100 communicate p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text text-capitalize">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">LONG LONG TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="h-100 internet p-3 box red" style="border-radius: 5%;">
<div>
<h5 class=" title text-uppercase">TEXT</h5>
<h4 class=" card-text">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="min-vh-100 speak p-3 box red" style="border-radius: 5%;">
<div>
<h4 class=" title">TEXT</h4>
</div>
<div>
<h5 class=" card-text">ICON</h5>
</div>
</div>
</div>
</div>
</div>
I am stuck with a problem, I made a Contact Us page , it is properly working on desktop mode but when am trying to see in mobile view it is not responsive , can anyone help me to fix this error
This is the Contact Us page, I want its working on mobile view properly
Contact.html
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
Can you please check the below code? Hope it will work for you.
You need to use col-md-6 class instead of col-6 class in the parent column class like the below code.
<section id="contact">
<div class="row mt-5 mb-5">
<div class="col-md-6">
<div class="row text-white ">
<div class="col-6 ">
<div class="row ">
<div class="col-3 icon-fot">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Find Us</h3>
<p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-clock"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Working Hour</h3>
<p style="display: inline;">Mon-Fri : 8AM-5PM</p>
<p>Sat-Sun : 8AM-2PM</p>
</div>
</div>
</div>
<div class="col-6 ">
<div class="row">
<div class="col-3 icon-fot">
<i class="fas fa-phone-alt"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Call Us</h3>
<p style="display: inline;">+123 456 7890</p>
<p>+123 456 7890</p>
</div>
</div>
<br>
<div class="row">
<div class="col-3 icon-fot">
<i class="far fa-envelope"></i>
</div>
<div class="col-9 text-form-footer">
<h3 class="font-weight-bold">Write To Us</h3>
<p style="display: inline;">Office#noise.com</p>
<p>Press#noise.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<form>
<div class="form-row">
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Name...">
</div>
<div class="col">
<input type="text" class="w-100 p-2" placeholder="Your Email...">
</div>
</div>
<textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
<button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
</form>
</div>
</div>
</section>
I am new to web devlopment and stuck on this issue for quite some time now.
I wish to make a table(in 2nd col-6) with buttons at top and than changing content(scrollable cards) below it based on button click.
I tried to implement it but my cards and buttons overlap how to tackle this and overlapping makes buttons non reactive.
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="container">
<div >
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope you are using bootstrap 4 or higher, Try this
<div class="Container">
<div class="row">
<div class="col-md-6 ">
<div > this is the table</div>
</div>
<div class="col-md-6 ">
<div class="row">
<div class="col-md-12">
<div v-for="(eachbutton, index) in getbuttons" :key="index" style="color:#ffff">
<button class="tablink" style="margin-bottom:12px" #click="changeList(eachWidget.displayTitle)" id="defaultOpen">{{eachbutton.displayTitle}}</button>
</div>
</div>
<div class="col-md-12">
<div v-for="(each, index) in getCarddata" :key="index" style="color:#ffff">
<div class="col-md-4 col-12 " style="width: 200px; height:90px margin-top: 90px">
<div class="card mb-6" style="background-color: #050b06;">
<div class="row g-0 ">
<div class="col-md-6 col-6 w-100 h-100">
<img class="w-100 h-100" style="margin:11px" :src="each.ImageUrl" alt="..." />
</div>
<div class="col-md-6 col-6">
<p class="card-text text-episode" style="text-align: left; color:#fff;">
<small class="text-muted"> card</small>
</p>
<p class="card-text text-start" style="text-align: left;">
<small class="text-muted">text</small
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My Requirement
I need to make a bootstrap card that is small in size so that it fits my page exactly.
need to remove much of the padding, margin spaces around the card, text, icon ...
That is, it should be as small as possible to fit 8 (equal-sized) such cards in a row
so that all the parameters exactly fit in a single page view along with 2 charts displayed above as shown in the below screenshot.
The code below in Bootstrap gets me the card as shown in this image. I am trying to make the same card, kind of replica of the card but small in size.
<div class=" col-lg-3 col-md-6">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
What I have tried
I tried to change the bootstrap's CSS element col number (col-1,col-5..), remove padding for the CSS element card,card-body, ... , info-icon to make the icon relatively small
But it doesn't get me its replica w.r.t the text, icon.
It always ended up with a messed up card.
Please help me. My ultimate goal is to make it smaller and include additional data (4 parameter data) within the card which should look something like this
That is
an icon at the top left corner
First Data at the top right corner
Second Data above the footer of the card below icon
Third Data right side corner, right-aligned to second data #3 mentioned above
Fourth Data in the Footer.
Also if you have any other good ideas to include 4 parameter data in a single card please share it with me.
This I do to fit all parameters within the single page view.
use col class instead of col-lg-3 col-md-6. so, you can set 8 columns in one row.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
<div class="col">
<div class=" card card-stats">
<div class=" card-body">
<div class=" row">
<div class=" col-5">
<div class=" info-icon text-center icon-primary">
<i class=" icons icon-shape-star"> </i>
</div>
</div>
<div class=" col-7">
<div class=" numbers">
<p class=" card-category">Followers</p>
<h3 class=" card-title">+45k</h3>
</div>
</div>
</div>
</div>
<div class=" card-footer">
<hr />
<div class=" stats">
<i class=" icons icon-sound-wave"> </i> Last Research
</div>
</div>
</div>
</div>
I am using a tempalte downloaded from tabler and you can see the demo of that template at https://preview.tabler.io/ and i want to scroll small cards left and right at present they are 6 if i will increased its count then they are displaying below but i want them in a row that can be scrollable horizontally.
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
6%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">43</div>
<div class="text-muted mb-4">New Tickets</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-3%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">17</div>
<div class="text-muted mb-4">Closed Today</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
9%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">7</div>
<div class="text-muted mb-4">New Replies</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
3%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">27.3K</div>
<div class="text-muted mb-4">Followers</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-2%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">$95</div>
<div class="text-muted mb-4">Daily Earnings</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-1%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">621</div>
<div class="text-muted mb-4">Products</div>
</div>
</div>
</div>
</div>
I would suggest that you use the tag containing images, within an IFrame, to allow scrolling:
Index.htm
<iframe src="images.htm"></iframe>
images.htm
<span><img src="IMAGE.png"></img><img src="IMAGE.png"></img><img src="IMAGE.png"></img></span>
This is just a thing I wrote off the top of my head, it may have problems
Based on Overflow-x not working
.row {
width: 100%; /* Your choice*/
overflow-x: auto;
white-space: nowrap;
}
.row>div {
border: 1px solid;
min-width: 150px; /* Your choice*/
display: inline-block;
}
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
6%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">43</div>
<div class="text-muted mb-4">New Tickets</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-3%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">17</div>
<div class="text-muted mb-4">Closed Today</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
9%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">7</div>
<div class="text-muted mb-4">New Replies</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-green">
3%
<i class="fe fe-chevron-up"></i>
</div>
<div class="h1 m-0">27.3K</div>
<div class="text-muted mb-4">Followers</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-2%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">$95</div>
<div class="text-muted mb-4">Daily Earnings</div>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
<div class="text-right text-red">
-1%
<i class="fe fe-chevron-down"></i>
</div>
<div class="h1 m-0">621</div>
<div class="text-muted mb-4">Products</div>
</div>
</div>
</div>
</div>