CODEWITHSUNDEEP
javascriptreactjsbootstrap-4
Rui Han
Rui Han

Reputation: 77

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

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:

enter image description here

But it looks like this on mobile device:

enter image description here

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.

Upvotes: 0

Views: 5276

Answers (2)

sushildlh
sushildlh

Reputation: 9056

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

Upvotes: 1

Rahul Pillai
Rahul Pillai

Reputation: 187

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

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

Upvotes: 3

Related Questions