How set cards in a row using react bootstrap

Question

I want to add card using react-bootstrap in a project. I used Grid and CardDeck option from react-bootstrap. But all cards comes in a column (like this). But I want this cards comes with side by side, not in row.(I want my output like this image).

Here the code for card section

import Card from 'react-bootstrap/Card';


const Course = (props) => {
  const {title, price,details,img} = props;
  return (
    <div>
    <div className="col-md-4 col-12 mt-5 mx-auto">
    <Card>
      <Card.Img variant="top" src={img} />
      <Card.Body>
        <Card.Title>{title}</Card.Title>
        <Card.Title>{price}</Card.Title>
        <Card.Text>
         {
           details
         }
        </Card.Text>
      </Card.Body>
     
    </Card>
   
    
    </div>
    
    </div>
  );
};

export default Course;

Where I pass the value

import React from "react";
import fakeData from "../FakedData/FakeData";
import Course from "../Course/Course";
import CardDeck from 'react-bootstrap/CardDeck';
const Home = () => {
  return (
    <div>
      <div className="container">
      <div className="row">
      <CardDeck>
      {fakeData.map((data) => {
        return (
          <Course
            key={data.id}
            title={data.title}
            price={data.price}
            details={data.details}
            img={data.img}
          />
        );
      })}
      </CardDeck>
      
      </div>
        </div>
      </div>
   
  );
};

export default Home;

Answer 1

I don't try this, it's the old way with modulo, should work, but not responsive

 const Home = () => {
    const numInRow = 4;
      return (
        <div>
          <div className="container">
           <div class="d-flex justify-content-center"> // <---- div first row
          {fakeData.map((data, idx) => { //<--- note the idx
            return (
              <Course
                key={data.id}
                title={data.title}
                price={data.price}
                details={data.details}
                img={data.img}
              />
              {idx % numInRow === 0 && </div><div class="d-flex justify-content-center">} // <--- use modulo to close row and open a new one
            );
          })}
          </div> //<-- div last row

            </div>
          </div>
       
      );
    };