'How to display react-bootstrap card component side by side horizontally

Hi guys so I'm trying to create some e-commerce web app using react-bootstrap. I wanted to map my item by using Card component from bootstrap. I manage to display each of the card, but I can't make them displayed side by side horizontally. I want each row to have 4/5 items anyone know how I can accomplish it ? here's my code:

Product.js

      <Row>
        <Col lg={4}>
          {productList && productList.map(product =>{
            const {id, title, price, category,description,image} = product;
            return(
            <>
              <Card key={id} className="productlist">
                <Card.Img variant="top" src={"#"} />
                <Card.Body>
                  <Card.Title>{title}</Card.Title>
                  <Card.Text>{description}</Card.Text>
                  <Card.Text>{category}</Card.Text>
                  <Card.Text>
                    {price}
                  </Card.Text>
                  <Button variant="primary">Add to cart</Button>
                </Card.Body>
              </Card>
            </>
            )
          })}
        </Col>
      </Row>
cssreactjsreact-bootstrap


Solution 1:[1]

You can do it simply using d-flex and flex fill react bootstrap class. It will also fulfill your need of equal height cards in a row.

Try below code may be its work as expected you want.

<Row lg={3}>
  {productList &&
    productList.map((product) => {
      const { id, title, price, category, description, image } =
        product;
      return (
        <Col className="d-flex">
          <Card className="flex-fill" key={id} className="productlist">
            <Card.Img variant="top" src={"#"} />
            <Card.Body>
              <Card.Title>{title}</Card.Title>
              <Card.Text>{description}</Card.Text>
              <Card.Text>{category}</Card.Text>
              <Card.Text>{price}</Card.Text>
              <Button variant="primary">Add to cart</Button>
            </Card.Body>
          </Card>
        </Col>
      );
    })}
</Row>

Solution 2:[2]

    <Row>
      {productList &&
        productList.map((product) => {
          const { id, title, price, category, description, image } =
            product;
          return (
            <Col className="col-6">
              <Card key={id} className="productlist">
                <Card.Img variant="top" src={"#"} />
                <Card.Body>
                  <Card.Title>{title}</Card.Title>
                  <Card.Text>{description}</Card.Text>
                  <Card.Text>{category}</Card.Text>
                  <Card.Text>{price}</Card.Text>
                  <Button variant="primary">Add to cart</Button>
                </Card.Body>
              </Card>
            </Col>
          );
        })}
    </Row>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aman
Solution 2

Related Questions