How to display list of Bootstrap Cards using Col?

user_15690730 0
Viewed 94

I am currently using react-bootstrap to iterate through an array to display cards. I want these cards to be responsive on different screen sizes. The array being mapped.

<div>
  {filteredProductsList.map((product) => {
    return (
      <Col key={product._id}>
        <ProductCard product={product} />
      </Col>
    );
  })}
</div>

And here is the ProductCard component

<Card className="product-card col-md-4">
        <Card.Img className="product-img" variant="top" src={product.image} />
        <Card.Body>
          <Card.Title>{product.title}</Card.Title>
          <Card.Text>{product.description}</Card.Text>
        </Card.Body>
      </Card>

It is currently displaying the cards in a single column with the assigned width of 4.

react-bootstrap bootstrap-4
1 Answers

I hope I get you right: You want to have a responsive layout with more products on each row on the big screen and fewer products on each row on the smaller ones.

If this is what you desire then you should return something like this when you are mapping:

<Container>
  <Row xs={2} md={4} lg={6}>
    {filteredProductsList.map(product => {
      return (
        <Col key={product._id}>
          <ProductCard product={product} />
        </Col>
      );
    })}
  </Row>
</Container>;

xs={2} stands for extra small devices md={4} stands for medium devices lg={6} stands for large devices

user_156067340
Related