how can i make cards equal height in react with react bootstrap?

Question

I using react with react-bootstrap. I want to design these card as a same height. For instance as in the attach image, when my second card title is break. So it needs to card height, then height of the second and 3rd card is increased, but first card has a small card title, so card take less height. I want all these card same heights, even other card height increase all card height increase. is this possible with custom CSS or bootstrap classes?

@computercarguy I do not add any custom CSS for bootstrap card , I just give width. that why i do not attached code snippet. — HASEEB ALAM RAFIQ, May 20 '22 at 17:59
Which version of Bootstrap? You can use [card groups](https://getbootstrap.com/docs/5.2/components/card/#card-groups) for this purpose. — kmoser, May 20 '22 at 18:25

score 3 · Accepted Answer · answered May 20 '22 at 18:01

If you can add custom CSS, using "display: flex" on the card's parent should do the trick. If you need to force the strech, you can add "align-items: stretch".

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.card {
  background: grey;
  padding: 15px;
  width: 30%;
}

<div class="wrapper">
  <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
    <div class="card">
    <h1>hello</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, recusandae, error! Quos repellat qui autem velit, laboriosam temporibus, incidunt accusantium similique vitae harum quod asperiores corporis dolore cum amet omnis.
    </p>
  </div>
</div>

how can i make cards equal height in react with react bootstrap?

1 Answers1