How to make a mesh of 4 elements in row reacte + bootstrap?

There is a catalog of products. The array of products obtained from the store. Need to get it all to mesh of 4 elements in the line and everything to be cent and every card was the same width. Tell me how to do it with just an array of goods? It is not clear how iterating on the array to make the string (className="row")

Now made so:
<div classname="container">
 <div classname="row">
{
 this.props.catalog.map(product => (
 <card classname="col" key="{product.uid}" name="{product.name}" price="{product.price}" imageurl="{product.imageUrl}" weight="{product.weight}" diameter="{product.diameter}">
))
}
</card></div>
</div>

5a92811492bbb656111499.png

On the big screen, everything looks more or less normal. But again, not strictly according to the 4 elements. And when you reduce the screen size, everything breaks down...
5a92822d0e94c095975174.png
June 7th 19 at 15:37
0 answer

Find more questions by tags BootstrapReact