Bootstrap grid system does not apply

Question

A problem occurs again in my project. I have a component ProductCard which I render inside the Home component. This is the ProductCard component

<div className={location.pathname === "/store" ? `gr-${grid}` : "col-3"}>
      {data &&
        data.length > 0 &&
        data.map((item, index) => (
          <Link
            key={index}
            to="/store/product-view/:id"
            className="product-card position-relative"
          >
            <div className="wishlist-icon position-absolute">
              <button
                className="border-0 bg-transparent"
                onClick={() =>
                  dispatch(
                    addWishlist({
                      token: user.refreshToken,
                      data: { item: item._id },
                    })
                  )
                }
              >
                <img src="/assets/images/wish.svg" alt="..." />
              </button>
            </div>
            <div className="product-image">
              {item.images.slice(0, 2).map((image, index) => (
                <img
                  key={index}
                  className="img-fluid"
                  src={image.image}
                  alt="..."
                />
              ))}
            </div>
            <div className="product-details">
              <h6 className="brand">{item.brand.name}</h6>
              <h5 className="product-title">{item.title}</h5>
              <Rating style={{ maxWidth: 90 }} value={item.totalRatings} />
              <p
                className={`description ${grid === 12 ? "d-block" : "d-none"}`}
              >
                {item.category.description}
              </p>
              <p className="price">&#36;&nbsp;{item.price}</p>
            </div>
            <div className="action-bar position-absolute">
              <div className="d-flex flex-column gap-15">
                <button className="border-0 bg-transparent">
                  <img src="assets/images/view.svg" alt="..." />
                </button>
                <button className="border-0 bg-transparent">
                  <img src="assets/images/prodcompare.svg" alt="..." />
                </button>
                <button className="border-0 bg-transparent">
                  <img src="assets/images/add-cart.svg" alt="..." />
                </button>
              </div>
            </div>
          </Link>
        ))}
    </div>

This is where I render it in the main component

<Container classProp="featured-wrapper py-5 home-wrapper-2">
   <div className="row">
      <div className="col-12">
         <h4 className="section-heading">Featured Collection</h4>
      </div>
          <ProductCard data={featuredProducts} />
  </div>
</Container>

This is the container component

const Container = (props) => {
  return (
    <section className={props.classProp}>
      <div className="container-xxl">{props.children}</div>
    </section>
  );
};

It appears in columns instead of using a grid system. Please tell me how to make the Home component display continuously.

Answer 1

I think you are looking for a nested grid layout. Take a look at this example:

  

    

      
        

          

            
Featured Collection
          
        
        

          {products.map(product => )}
        
      
    

  

Answer 2

I moved col-3 returned by the map function

   {data &&
     data.length > 0 &&
       data.map((item, index) => (
         

            
              ......
            
          
        ))}