Cards are not getting of equal size in Bootstrap

Question

Cards are not getting of equal size in Bootstrap

55 Views Asked by ubaid qureshi At 11 April 2025 at 03:54

I am trying to design a page in bootstrap. I have added 3 cards in a row but for some reason they are not getting of equal size. The data in the cards is getting random size along with the headings and image. Following is the code of the cards:

    <div class="container">
  <div class="row">
    <!--ADD CLASSES HERE d-flex align-items-stretch-->
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">Web Development</h3>
          <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
    <!--ADD CLASSES HERE d-flex align-items-stretch-->
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">IOS Development</h3>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
    <!--ADD CLASSES HERE d-flex align-items-stretch-->
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">SEO</h3>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
    </div>

Original Q&A

There are 1 best solutions below

**Rok Benko** · Answer 1

Add the following CSS:

img {
  height: 150px;
  object-fit: cover; /* If you add this images won't be distorted (try to remove it to see the effect) */
}

See the snippet below.

img {
  height: 150px;
  object-fit: cover;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-md-4 mb-3 d-flex align-items-stretch">
        <div class="card shadow h-100">
          <img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h3 class="card-title">Web Development</h3>
            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-md-4 mb-3 d-flex align-items-stretch">
        <div class="card shadow h-100">
          <img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h3 class="card-title">IOS Development</h3>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-md-4 mb-3 d-flex align-items-stretch">
        <div class="card shadow h-100">
          <img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h3 class="card-title">SEO</h3>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

Cards are not getting of equal size in Bootstrap

There are 1 best solutions below

Related Questions in HTML

Related Questions in BOOTSTRAP-5

Related Questions in BOOTSTRAP-CARDS

Trending Questions

Popular # Hahtags

Popular Questions