I have an array of images, between other properties, and I am trying to get this result:
When it reach the end of the container (on a desktop is 4 images and it must addapt to smaller screens) it should create another div
and insert the images inside it.
If I was working with static data I would do something like this:
<div>
<div className="d-flex products-container justify-content-between mt-5">
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
</div>
<div className="d-flex products-container justify-content-between mt-5">
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
<div className="border">
<img src={require('../../assets/images/Products/molde.png')} alt="Produto" />
</div>
</div>
</div>
However the data is coming dynamically from an API and I am using a loop to create the elements:
props.products.map(product => {
return <div className="border">
<img src={product.img} alt="Produto" />
</div>
})
Because of that I am getting this:
I tried to use a if else
statement based on the index
to determine the behavior but without success.
Any idea how to do that?
col-xs-6 col-sm-3
This will do 2 columns on mobile and everything above that will have 4 columns. You don't need to separate them into rows as that is automatically handled with the CSS. getbootstrap.com/docs/4.0/layout/grid – imvain2 Aug 19 '20 at 19:19row
. Noob mystakes :) . If you want to transform your comment into an answer I'd be glad to accept it. Thank you very much! – Berg_Durden Aug 19 '20 at 20:31