Same height and width of grid col cards html css BOOTSTRAP 3 - html

Question

This is what happend on my cards while having excess card in 1 row, I need it to be on the exact height and width even if different sizes of images. This is also in BOOTSTRAP 3
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
.card .card-body {
display: table;
width: 100%;
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
I need to be on the same width and height so this not happen THANK YOUUU :(((

Answer 1

There are a few things you need to adjust. I have documented the changes in the source code.
The main container is changed into a flexbox. Since the default for flexbox items is stretch, all cards will have the same height.
Everything below the image is in a separate container and aligned to the bottom of the card.
/* Added */
.overview {
display: flex;
}
.card-default {
display: flex;
flex-wrap: wrap;
}
.card-default>* {
width: 100%;
}
.excludingImage {
align-self: flex-end;
text-align: center;
}
/* End Added */
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
/*
.card .card-img {
position: relative;
padding: 0;
display: table;
}
.card .card-img .card-caption {
position: absolute;
right: 0;
bottom: 16px;
left: 0;
}
*/
.card .card-body {
/* display: table;
width: 100%; */
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
/*
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
*/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Class overview is added -->
<div class="col-xs-6 col-sm-3 overview">
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x100" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to enable alignment at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="card card-default">
<div class="card-img">
<img src="https://via.placeholder.com/120x150" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to align at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b>Cart name</b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
</div>

Answer 2

You can use flexbox to achieve this add display:flex to parent div and check
check code snippet below using flexbox
.card-main {
display: flex;
}
<div class="card-main">
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
</div>
Note: please change display:flex to display:block for responsive in media query: