Bootstrap 5 Class "col-md-4 " Is Not Working - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Bootstrap 5 class "col-md-4 " is not working Ask Question Asked 3 years, 5 months ago Modified 3 years, 5 months ago Viewed 852 times 3

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

• html
• css
• reactjs
• bootstrap-5

Share Improve this question Follow edited Jul 15, 2021 at 12:24 Carol Skelly 362k9191 gold badges734734 silver badges645645 bronze badges asked Jul 15, 2021 at 12:03 Bhavik JainBhavik Jain 451010 bronze badges 1

• For Bootstrap 5 you just need to use col-5 – Crezzur Commented Jul 15, 2021 at 12:05

Add a comment |

1 Answer 1

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 2

"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

Share Improve this answer Follow edited Jul 15, 2021 at 12:23 answered Jul 15, 2021 at 12:07 Carol SkellyCarol Skelly 362k9191 gold badges734734 silver badges645645 bronze badges 0 Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css
• reactjs
• bootstrap-5

or ask your own question.

• The Overflow Blog
• Developers want more, more, more: the 2024 results from Stack Overflow’s...
• How AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Related

0 Bootstrap classes are not picked up in React component 4 bootstrap is not working in ReactJS code 3 Col width in React Bootstrap 1 Bootstrap col-md issue 14 Container, Row, Col - in React-Bootstrap not working 0 The col-sm doesn't work when I have a col-md 0 Bootstrap rows/columns not working in React app 0 make react bootstrap column md 0 why bootstrap styling isnt applied on my tables in reactjs 1 Why 'Col' is not working in React bootstrap?

Hot Network Questions

• Not submitting separate transcripts for colleges all on one transcript
• Manhwa with a character who makes rare pills with modern knowledge that shocks his teacher
• Reason for poly1305's popularity?
• Convert to Pascal-ary
• Pressing electric guitar strings out of tune
• Gather on first list, apply to second list
• Implementing a joint differential equation and eigenvalue solver
• What are the default variable names in Latex for the width and height of an image?
• Test To Destruction - short story (not the Keith Laumer one)
• How to get personal insurance with car rental when not owning a vehicle
• Why does one have to avoid hard braking, full-throttle starts and rapid acceleration with a new scooter?
• Luke 20:38 | "God" or "a god"
• Mama’s cookies too dry to bake
• Why is the United Kingdom often considered a country, but the European Union isn't?
• Is it possible to manipulate or transform the input within an environment?
• Happy 2025! This math equation is finally true. When is the next time it will be true?
• Returning a sequence from a function
• How serving documents ensure that a party got the right ones?
• Heat liquids (water, milk) to specific temperature?
• Pull Chances for Powerups in Mario Kart 8 Deluxe
• Can an intelligent agent with aims desire to modify itself to change those aims?
• Is there any formula for sum of product of n consecutive integers?
• How can point particles be Lorentz Contracted?
• How could an Alcubierre/Warp Drive work in my science-fantasy story?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default