CODEWITHSUNDEEP
htmlcssreactjsbootstrap-5
Bhavik Jain
Bhavik Jain

Reputation: 45

Bootstrap 5 class "col-md-4 " is not working

I want to make a grid of 3 columns and 2 rows using Bootstrap cards but the Grid is not working. All the cards are centered and one after the other. Please help me resolve this.

Service.jsx

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.jsx

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>  
    );
  };

Upvotes: 3

Views: 856

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

"All the cards are centered and one after the other".

The columns are being wrapped by an outer div. Columns must be directly in the parent .row. Remove the outer div.

const Card =(props) =>{
    return(
            <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>
    );
  };

React demo on Codeply

Upvotes: 2

Related Questions