align items next to each using bootstrap - reactjs

Question

i have this images
i have loaded them from api and i created another component that will print them. my problem is that i have about 50 images and i want each 3 to be on one row with the title under them and the next one will hold 3 new but i don't really know bootstrap and can't seem to solve this problem.
postItem.js
import React from 'react';
function PostItem ({key,src,thumbnailUrl,onClick,title}) {
return (
<div>
<div key={key}>
<img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
<div>{title}</div>
</div>
</div>
)}
export default PostItem;
post.js:
<div><h3>Posts</h3></div>
<div>
<div>{newPhotosLocally.map(picture =>
<PostItem
key={picture.id}
src={picture.thumbnailUrl}
thumbnailUrl={picture.thumbnailUrl}
onClick={() => showPicture(picture.url,picture.id)}
title={picture.title}/>
// <div key={picture.id}>
// <img src={picture.thumbnailUrl} thumbnailUrl={picture.thumbnailUrl} onClick={() => showPicture(picture.url,picture.id)}></img>
// <div>{picture.title}</div>
// </div>
)}</div>
</div>

Answer 1

As you mentioned that you have already included bootstrap in your project, you can use col class to specify the width for each image.
You can read about grid system of bootstrap here: GRID SYSTEM
Your postItem.js file should look like this:
import React from 'react';
function PostItem ({key,src,thumbnailUrl,onClick,title}) {
return (
<div class="container-fluid text-center">
<div class="row">
<div class="col-4" key={key}>
<img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
<div>{title}</div>
</div>
<div class="col-4" key={key}>
<img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
<div>{title}</div>
</div>
<div class="col-4" key={key}>
<img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
<div>{title}</div>
</div>
</div>
</div>
)}