title: How set cards in a row using react bootstrap
body: <p>I want to add card using <code>react-bootstrap</code> in a project. I used Grid and CardDeck option from react-bootstrap. But all cards comes in a column (<a href="https://i.stack.imgur.com/pfOxz.png" rel="nofollow noreferrer">like this</a>). But I want this cards comes with side by side, not in row.(<a href="https://i.stack.imgur.com/SUXcD.png" rel="nofollow noreferrer">I want my output like this image</a>).</p>
  <p><strong>Here the code for card section</strong></p>
  <pre><code>import Card from 'react-bootstrap/Card';
  
  
  const Course = (props) =&gt; {
    const {title, price,details,img} = props;
    return (
      &lt;div&gt;
      &lt;div className=&quot;col-md-4 col-12 mt-5 mx-auto&quot;&gt;
      &lt;Card&gt;
        &lt;Card.Img variant=&quot;top&quot; src={img} /&gt;
        &lt;Card.Body&gt;
          &lt;Card.Title&gt;{title}&lt;/Card.Title&gt;
          &lt;Card.Title&gt;{price}&lt;/Card.Title&gt;
          &lt;Card.Text&gt;
           {
             details
           }
          &lt;/Card.Text&gt;
        &lt;/Card.Body&gt;
       
      &lt;/Card&gt;
     
      
      &lt;/div&gt;
      
      &lt;/div&gt;
    );
  };
  
  export default Course;
  </code></pre>
  <p><strong>Where I pass the value</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import fakeData from &quot;../FakedData/FakeData&quot;;
  import Course from &quot;../Course/Course&quot;;
  import CardDeck from 'react-bootstrap/CardDeck';
  const Home = () =&gt; {
    return (
      &lt;div&gt;
        &lt;div className=&quot;container&quot;&gt;
        &lt;div className=&quot;row&quot;&gt;
        &lt;CardDeck&gt;
        {fakeData.map((data) =&gt; {
          return (
            &lt;Course
              key={data.id}
              title={data.title}
              price={data.price}
              details={data.details}
              img={data.img}
            /&gt;
          );
        })}
        &lt;/CardDeck&gt;
        
        &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     
    );
  };
  
  export default Home;
  </code></pre>