How to make product cards equal height?

Question

I'm a beginner to all of this and I am trying to get these product cards to be equal in height. I have gone through multiple websites and posts trying to edit but to no avail. I think the problem is because of the different number of lines of the title of the products - the titles which take up the same number of lines are equal height. However, I need all the product cards to be equal. What can I do?

#content {
  padding-left: 25px;
}

.single {
  width: 290px;
}

@media(max-width:768px) {
  .single {
    width: 60%;
    margin: 0 auto;
  }
}

#content .product {
  background: #ffffff;
  border: solid 1px #e6e6e6;
  margin-bottom: 30px;
  box-sizing: border-box;
}

#content .product .text {
  padding: 10px 10px 0px;
}

#content .product .text p.price {
  font-size: 18px;
  text-align: center;
  font-weight: 400;
}

#content .product .text .button {
  text-align: center;
  clear: both;
}

#content .product .text .button .btn {
  margin-bottom: 10px;
}

#content .product .text h3 {
  text-align: center;
  font-size: 20px;
}

#content .product .text h3 a {
  color: rgb(85, 85, 85);
}

<div class='col-md-4 col-sm-6 center-responsive'>

  <div class='product'>

    <a href='details.php?pro_id=$pro_id'>

      <img class='img-responsive' src='admin_area/product_images/$pro_img1'>

    </a>

    <div class='text'>

      <h3>

        <a href='details.php?pro_id=$pro_id'> $pro_title </a>

      </h3>

      <p class='price'>

        ₹$pro_price

      </p>

      <p class='button'>

        <a class='btn btn-default' href='details.php?pro_id=$pro_id'>

                                            Details

                                        </a>

        <a class='btn btn-primary' href='details.php?pro_id=$pro_id'>

          <i class='fa fa-shopping-cart'></i> Add To Cart

        </a>

      </p>

    </div>

  </div>

</div>

Everything on the webpage is enclosed in a <div id="content">

What I get
What I want

Also, if someone could let me know how to add CSS styling properly (unless this is the right way), I'd greatly appreciate it.

Thank you!

have a look at this if you are using bootstrap 4: https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns#answer-49197410 — Pete, Feb 19 '20 at 13:16
No...Bootstrap 3 works with floats, making card equal heights required Flexbox which is what BS4 uses — Paulie_D, Feb 19 '20 at 13:28
I think the best way would be to set the height of card, and then position the buttons (and the price if you want) at the bottom. So that a space is automatically made in between — Joël-Etienne, Feb 19 '20 at 13:37
you can give fixed height to the 'center-responsive' class. like .center-responsive { height: 100px; text-overflow: ellipsis; overflow: hidden; white-space: normal; } you can check the [stackblitz] https://stackblitz.com/edit/github-wkjavd?file=src/app/app.component.scss — pavan kumar, Feb 19 '20 at 13:40
@Joël-Etienne, Would that work because I'm simply using the code for generating a single card and then since I connected it to a database, it constantly creates 'n' pages of products with 6 product cards a page? — Thughank, Feb 19 '20 at 14:50
@pavankumar, I tested your code, but when I added more text to the card title to make it go to two lines, the cards were not equal in height — Thughank, Feb 19 '20 at 14:52
@Thughank, yes. What you need is that your card is "position: relative", and then seperate the content in two section, one that goes automatically up, and the other that goes down like this: "position: absolute" with "bottom: 0". Like this, the extra space will be put in the center — Joël-Etienne, Feb 19 '20 at 15:59
@Thughank, sorry you need to give fixed height to the **card** class, not for the **card-title** class [check](https://stackblitz.com/edit/github-wkjavd-24ernk?file=src%2Fapp%2Fapp.component.scss). In your case add fixed height to the **product** — pavan kumar, Feb 20 '20 at 07:05

How to make product cards equal height?

0 Answers0