How to get React-bootstrap cards the same size? - css

Question

I am using React-bootstrap for my app, specifically the Card& CardGroup components. I want help please with making the cards all the same height.
JSX component:
<Card style={{flex: 1}} className="card">
<Card.Img variant="top" src={Weather} />
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in
to additional content. This content is a little bit longer.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card style={{flex: 1}} className="card">
<Card.Img variant="top" src={Scheduler} />
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to
additional content.{' '}
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card style={{flex: 1}} className="card">
<Card.Img variant="top" src={Quiz} />
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in
to additional content. This card has even longer content than the
first to show that equal height action.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</CardGroup>
)
Related CSS:
.card {
padding: 30px;
margin-top:59px;
}
Here's what it currently looks like
enter image description here
I have tried using max-height and min-height, but it didnt work. I learned react a month ago and thus are trying to get acclimated with it. I would truly appreciate help on how to make these cards all the same height/size, regardless of the height of the photos. Or how to make the photo sizes the same as well.
Thank you so much

Answer 1

Not sure if I understand the desired result, but if the goal is to:
make these cards all the same height/size, regardless of the height of the photos
It seems that Card.Body is already taking the remaining space of Card, and it could be styled to align the text and button to the bottom, making the whole CardGroup aligned vertically.
The below example adds some bootstrap classes for this as a basic solution.
Live demo of the simplified example on: stackblitz
Example:
<CardGroup>
<Card className="card d-flex flex-column">
<Card.Img src={Weather} />
<Card.Body className="d-flex flex-column justify-content-end align-items-center">
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card className="card d-flex flex-column">
<Card.Img src={Scheduler} />
<Card.Body className="d-flex flex-column justify-content-end align-items-center">
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card className="card d-flex flex-column">
<Card.Img src={Quiz} />
<Card.Body className="d-flex flex-column justify-content-end align-items-center">
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</CardGroup>