title: How do I change the number of cards displayed in row
body: <ul>
  <li>I am new to react and bootstrap. I am using react card bootstrap to generate a card layout and add buttons to it. I am able to change the height and width of the cards and apply padding also.</li>
  <li>I am not getting any reference where should I change the number of cards displayed in a row.</li>
  <li><code>CardUI.jsx</code></li>
  </ul>
  <pre><code>import React from 'react';
  import './card-style.css';
  
  const Card = props =&gt;{
      return(
          &lt;div className=&quot;card text-center shadow&quot;&gt;
              &lt;div className=&quot;overflow&quot;&gt;
                  &lt;img src={props.imgsrc} alt=&quot;Image 1&quot; className=&quot;card-img-top&quot;/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;card-body text-dark&quot;&gt;
                  &lt;h4 className=&quot;card-title&quot;&gt;{props.title}&lt;/h4&gt;
                  &lt;h4 className=&quot;card-text&quot;&gt;{props.text}&lt;/h4&gt;
                  &lt;a href=&quot;#&quot; className=&quot;btn btn-outline-success&quot;&gt;Click here to know more !&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Card;
  </code></pre>
  <ul>
  <li><code>Cards.jsx</code></li>
  </ul>
  <pre><code>import React, { Component } from 'react';
  import Card from './CardUI';
  
  import img2 from '../assets/img2.jpg';
  
  class Cards extends Component {
      render() {
          return (
              &lt;div className=&quot;container-fluid d-flix justify-content-center&quot;&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;Vet&quot; text=&quot;All types of vets for your pets&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;Trainer&quot; text=&quot;All types of trainer for your pets&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;Hostel&quot; text=&quot;Home like hostels for your pets&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;Salon&quot; text=&quot;Perfetc salon for your pets&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;Events&quot; text=&quot;Events for your pets&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Card imgsrc={img2} title=&quot;More&quot; text=&quot;Checkout some more interesting activites for your pets&quot;/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Cards;
  </code></pre>
  <ul>
  <li>The layout I am getting now
  <a href="https://i.stack.imgur.com/8S0Ts.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8S0Ts.png" alt="enter image description here" /></a></li>
  </ul>