My goal is to create a grid layout with 3 columns and 2 rows using Bootstrap cards, but I'm encountering an issue where all the cards are centered and stacked on top of each other. Can someone please assist me in resolving this problem?
Service.js
const Service =() =>{
return(
<div>
<div className="my-5">
<h1 className="text-center">Our Services</h1>
</div>
<div className="container-fluid mb-5">
<div className="row">
<div className="col-10 mx-auto">
<div className="row gy-3">
{Sdata.map((val, ind) => {
return(
<Card key={ind} imgsrc={val.imgsrc} title={val.title} />
)})}
</div>
</div>
</div>
</div>
</div>
);
};
Card.js
const Card =(props) =>{
return(
<div>
<div className="col-md-4 col-10 mx-auto">
<div className="card">
<img src={props.imgsrc} className="card-img-top" alt={props.imgsrc} />
<div className="card-body">
<h5 className="card-title font-weight-bold">{props.title}</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<NavLink to="#" className="btn btn-primary">Go somewhere</NavLink>
</div>
</div>
</div>
</div>
);
};