How to make responsive React bootstrap cards that are vertically aligned?

Question

I have a card component:

 <Card className="m-5 border-0 shadow" style={styles.card}> <Row> <Col> <Card.Img src={props.image} style={styles.cardImage}/> </Col> <Col> <Card.Body> <Card.Title as="h1"> {props.title} </Card.Title> <Card.Text as="h4" style={styles.cardText}> {props.description} </Card.Text> </Card.Body> { props.link && <Button style={styles.button} href={props.url}>Read More</Button> } </Col> </Row> </Card>

The card is wrapped in a fluid <Container> and <CardGroup> component from react-bootstrap :

 <Container fluid className="text-center"> <CardGroup className="m-5 d-block"> <Card /> </CardGroup> </Container>

On desktop device it looks like this:

But it looks like this on mobile device:

Here are the styles:

 const styles = { card: { backgroundColor: '#B7E0F2', borderRadius: 55, padding: '3rem' }, cardImage: { height: '100%', objectFit: 'cover', borderRadius: 55 } };

Does anyone know how to fix this? Thanks.

Answer 1

Try this. For the <Row> component class with className row in css file assign property as follows:

.row {
 display: flex,
 flex-wrap:wrap
 }

Answer 2

Try this one

                    <Card.Columns>

                                <Card >
                                <Card.Body>
                                <Card.Title style={{textAlign:"center"}}>title</Card.Title>
                                <Card.Text style={{textAlign:"left"}}>
                                    description
                                </Card.Text>
                                </Card.Body>
                                <Card.Footer>
                                <Card.Text style={{textAlign:"right"}}>Link</Card.Text>
                                </Card.Footer>
                                </Card>

                    </Card.Columns>

For more details check out this Link