I have created a gallery with Bootstrap in React.js. The posts are currently displayed using the bootstrap grid system, however, all posts appear on the left side and I am struggling to center them. Any ideas on how to achieve this?
https://i.sstatic.net/rw8k6.png
After applying justify-content-center
https://i.sstatic.net/nfUEc.png
After removing margin: 10px; from .top_post
https://i.sstatic.net/LmnEm.png
After removing width: 250px; from .top_post CSS
https://i.sstatic.net/QmsIO.png
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CSS
.top_hello {
text-align: right;
margin: 20px 0 0 0;
}
.top_search {
margin: 20px 0 20px 0;
justify-content: right;
}
.top_search_input {
display: flex;
margin-right: 0;
margin-left: auto;
}
.top_post {
/* position: relative; */
background:lightgreen;
padding:15px;
border-radius: 10px;
margin-bottom: 30px;
/* width: 250px; */
height: 400px;
margin: 10px;
}
.top_post_photo {
object-fit: cover;
width: 200px;
height: 200px;
}
JSX
<div className="container">
<div className="row text-center">
<p className="top_hello">Hello Hiroko!</p>
<div className="top_search col-12">
<form className="top_search_input form-inline col-4" onSubmit={handleSubmit(getSearchResult)}>
<input placeholder="Search Title or Maker" className='form-control' {...register('search', { required: true })} />
<input className='btn btn-secondary' type="submit" value="Search" />
</form>
</div>
<>
{post.map((item,i) => (
<div key={i} className="top_post col-6 col-lg-3">
<div className="slideshow-container">
{item.photo &&
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo} />
</div>
}
{item.photo2 &&
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo2} />
</div>
}
{item.photo3 &&
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo3} />
</div>
}
{item.photo4 &&
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo4} />
</div>
}Ï
{item.photo5 &&
<div className="mySlides fade">
<img className="top_post_photo" src={item.photo5} />
</div>
}
<a className="prev" onclick="plusSlides(-1)">❮</a>
<a className="next" onclick="plusSlides(1)">❯</a>
</div>
<p>Title: {item.title}</p>
<p>Condition: {item.condition_name}</p>
<Link to={`/post/${item.id}`} className='btn btn-secondary'>Detail</Link>
</div>
))}
</div>
</div>