CODEWITHSUNDEEP
htmlcss
Angela
Angela

Reputation: 81

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

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

enter image description here

.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">
      <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
  </div>
</div>

I need to be on the same width and height so this not happen THANK YOUUU :(((

Upvotes: 0

Views: 1254

Answers (2)

Gerard
Gerard

Reputation: 15786

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">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></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">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
    </div>
  </div>
</div>

Upvotes: 1

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

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">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></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">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></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">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
    </div>
  </div>
</div>

Note: please change display:flex to display:block for responsive in media query:

Upvotes: 0

Related Questions