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.

Rahul Pillai · Accepted Answer · 2020-05-28 20:02:18Z

3

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

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

answered May 28, 2020 at 20:02

Rahul Pillai

1871 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sushildlh · Accepted Answer · 2020-05-28 20:23:27Z

1

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

answered May 28, 2020 at 20:23

sushildlh

9,0664 gold badges36 silver badges78 bronze badges

2 Comments

Rui Han Over a year ago

Uh there is no <Card.Columns> in react-bootstrap. Did you mean <CardColumns> component? I tried it and didn't work.

sushildlh Over a year ago

will you create sandbox and share it with me?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related