0

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Harendra
  • 3
  • 4

1 Answers1

0

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

ary perdana
  • 56
  • 2
  • Using `` in both Col tags worked for height of the Cards but it changed the widths. Therefore I added lg={3} to make the width equal. Now it works fine. Finally, both Col tags shall be `` – Harendra Nov 24 '22 at 16:34