I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0

My product cards are not getting displayed in a row

I want to display 4 product cards in a row.

Adding Codes:

Home Page code:

<div className="container-fluid mb-2">
      <Carousel />
      <div className="mt-2">
        <div className="row">
          <div className="col-md-2">
            <GetAllCategories />
          </div>
          <div className="col-md-10">
            <div className="row row-cols-1 row-cols-md-4 g-4">
              <div className="col">
                {products.map((product) => {
                  return <ProductCard item={product} />;
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

PRODUCT CARD CODE:

const ProductCard = (product) => {
  return (
    <div >
      <img
        src={"http://localhost:8080/api/product/"   product.item.imageName}
        
        alt="img"
        style={{
          maxHeight: "270px",
          maxWidth: "100%",
          width: "auto",
        }}
      />

      <div >
        <h5 >
          <div>
            <b>{product.item.title}</b>
          </div>
          <CategoryNavigator
            item={{
              id: product.item.category.id,
              title: product.item.category.title,
            }}
          />
        </h5>
        <p className="card-text">
          <b>{product.item.description}</b>
        </p>
      </div>
      <div >
        <div className="text-center text-color">
          <p>
            <span>
              <h4>Price : &#8377;{product.item.price}</h4>
            </span>
          </p>
        </div>
        <div className="d-flex justify-content-between">
          <Link
            to={`/product/${product.item.id}/category/${product.item.category.id}`}
            className="btn bg-color custom-bg-text"
          >
            Add to Cart
          </Link>

          <p >
            <b>
              <i>Stock :</i> {product.item.quantity}
            </b>
          </p>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;

From the past 4 days, I'm struggling to resolve this issue.

Please help me to fix this.

Thank You

CodePudding user response：

You need to move <div className="col"> from home page to ProductCard as first element in return statement. Sample code at https://codesandbox.io/s/falling-thunder-swzukd