How to make Cards of same size irrespective of the text in React Bootstrap?

Question

I am trying to add two same size cards in Gatsby using React Bootstrap. However, the cards' size become different if the card text or image has different dimensions. How to make the smaller card to be of the same size as the larger one? Basic code that I am using:

<Row>
        <Col>
            <Card>
              <StaticImage
                src="../images/example1.svg"
                alt="banner image"
                placeholder="blurred"
                layout="fullWidth"
              />
              <Card.Body>
                <Card.Title>Example 1</Card.Title>
                <Card.Text>
                  <p className="text-muted">
                    This is example 1
                  </p>
                </Card.Text>
              </Card.Body>
            </Card>
        </Col>

        <Col>
            <Card>
              <StaticImage
                src="../images/example2.svg"
                alt="banner image"
                placeholder="blurred"
                layout="constrained"
              />
              <Card.Body>
                <Card.Title>Example2</Card.Title>
                <Card.Text>
                  <p className="text-muted">
                    THis is example 2
                  </p>
                </Card.Text>
              </Card.Body>
            </Card>
        </Col>
</Row>

I have read the Card docs on React Bootstrap website but it has not been covered there.

Answer 1

you can add d-flex and align-items-stretch into the col component. You can see other references here : How to make Bootstrap 4 cards the same height in card-columns? I hope this help you