title: How do I display 3 card components horizontally with react bootstrap and grids?
body: <p>db.json</p>
  <pre><code>{
    &quot;products&quot;: [
      {
        &quot;id&quot;: 1,
        &quot;name&quot;: &quot;Moto G5&quot;,
        &quot;quantity&quot;: 2,
        &quot;price&quot;: 13000
      },
      {
        &quot;id&quot;: 2,
        &quot;name&quot;: &quot;Racold Geyser&quot;,
        &quot;quantity&quot;: 3,
        &quot;price&quot;: 6000
      },
      {
        &quot;id&quot;: 3,
        &quot;name&quot;: &quot;Dell Inspiron&quot;,
        &quot;quantity&quot;: 4,
        &quot;price&quot;: 50000
      },
      {
        &quot;id&quot;: 4,
        &quot;name&quot;: &quot;Epson Printer&quot;,
        &quot;quantity&quot;: 1,
        &quot;price&quot;: 9500
      },
      {
        &quot;name&quot;: &quot;Lenovo G50&quot;,
        &quot;quantity&quot;: 2,
        &quot;price&quot;: 50000,
        &quot;id&quot;: 5
      }
    ]
  }
  </code></pre>
  <p>App.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';
  import AllProductsPage from './components/AllProductsPage';
  import AddProductPage from './components/AddProductPage';
  import ProductDetail from './components/ProductDetail';
  import './App.css'
  import {Provider} from 'react-redux';
  import configureStore from './stores/configureStore';
  import {loadProduct} from './actions/productActions';
  
  export default class App extends React.Component {
    render() {
  
         const About=()=&gt;(
                &lt;div&gt;
                    &lt;h1&gt;About : This application provides information about the products &lt;/h1&gt;
                &lt;/div&gt;
        );
  
        const Header = ()=&gt;(
          &lt;header&gt;
              &lt;NavLink to=&quot;/about&quot; activeClassName=&quot;is-active&quot; &gt;About&lt;/NavLink&gt;
              &lt;NavLink to=&quot;/&quot; exact={true} activeClassName=&quot;is-active&quot; &gt;Products&lt;/NavLink&gt;
          &lt;/header&gt;
      );
  
         
        const store = configureStore();
        //loading data from db.json and into the store through the reducers
        store.dispatch(loadProduct());
  
        return (
          &lt;Provider store={store}&gt;
            &lt;Router&gt;
                &lt;Header/&gt;
                &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot; exact={true} component={AllProductsPage} /&gt;
                  &lt;Route path=&quot;/about&quot;  component={About}/&gt;
                  &lt;Route path=&quot;/addProduct&quot; component={AddProductPage} /&gt;
                  &lt;Route path=&quot;/ProductDetail&quot; component={ProductDetail}/&gt;
                &lt;/Switch&gt;
            &lt;/Router&gt;
          &lt;/Provider&gt;
        );
    }
  }
  
  </code></pre>
  <p>AllProductsPage.js</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from &quot;react&quot;;
  import { connect } from &quot;react-redux&quot;;
  import { bindActionCreators } from &quot;redux&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import ProductList from &quot;./ProductList&quot;;
  import * as productActions from &quot;../actions/productActions&quot;;
  import { Button } from &quot;react-bootstrap&quot;;
  
  class AllProductsPage extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Product List - Using Redux&lt;/h1&gt;
          &lt;ProductList products={this.props.products} /&gt;
          &lt;br /&gt;
          &lt;Link to=&quot;/addProduct&quot;&gt;&lt;Button variant=&quot;primary&quot;&gt;Add Product&lt;/Button&gt;{&quot; &quot;}&lt;/Link&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state, ownProps) {
    return {
      products: state.products,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators(productActions, dispatch),
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(AllProductsPage);
  
  </code></pre>
  <p>ProductList.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import Product from &quot;./Product&quot;;
  import { Container, Row, Col} from &quot;react-bootstrap&quot;;
  
  export default class ProductList extends React.Component {
    render() {
      var productNodes = this.props.products.map((product) =&gt; {
        return (
          &lt;Product
            key={product.id}
            id={product.id}
            name={product.name}
            quantity={product.quantity}
            price={product.price}
          &gt;
            {product.text}
          &lt;/Product&gt;
        );
      });
      return (
        &lt;div&gt;
          &lt;Container&gt;
            &lt;Row&gt;
            &lt;Col xs=&quot;4&quot;&gt;
                  {productNodes}
                &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  <p>Product.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { Prompt } from &quot;react-router&quot;;
  import { Card, Button } from &quot;react-bootstrap&quot;;
  export default class Comment extends React.Component {
    // eslint-disable-next-line
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;Card style={{ width: &quot;18rem&quot; }}&gt;
        &lt;Prompt message={location =&gt;location.pathname.includes(&quot;/ProductDetail&quot;)?  `Are you sure you want to view the details ?` : true  } /&gt;
          &lt;Card.Body&gt;
            &lt;Card.Title&gt;
              {this.props.name}
            &lt;/Card.Title&gt;
            &lt;Card.Text&gt;
              Quantity : {this.props.quantity}
            &lt;/Card.Text&gt;
            &lt;Card.Title&gt;{this.props.price}&lt;/Card.Title&gt;
            &lt;Link to={{pathname: &quot;/ProductDetail&quot;,productName:{name : this.props.name}}}&gt;
              &lt;Button variant=&quot;primary&quot;&gt;View Product&lt;/Button&gt;
            &lt;/Link&gt;
          &lt;/Card.Body&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  </code></pre>
  <p>Now this is my first time using react-bootstrap.
  So i don't have much clue here.</p>
  <p>What i want is like for the cards to be generated in such a way that there should be THREE cards in a row.</p>
  <p>Now this is the code i've done so far, but I am confused on how i can make the cards horizontal, without writing <code>&lt;Col&gt;</code> three times, which repeats the same component 3 times in a row.
  Please help.</p>