db.json

{

  "products": [

    {

      "id": 1,

      "name": "Moto G5",

      "quantity": 2,

      "price": 13000

    },

    {

      "id": 2,

      "name": "Racold Geyser",

      "quantity": 3,

      "price": 6000

    },

    {

      "id": 3,

      "name": "Dell Inspiron",

      "quantity": 4,

      "price": 50000

    },

    {

      "id": 4,

      "name": "Epson Printer",

      "quantity": 1,

      "price": 9500

    },

    {

      "name": "Lenovo G50",

      "quantity": 2,

      "price": 50000,

      "id": 5

    }

  ]

}

App.js

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=()=>(

              <div>

                  <h1>About : This application provides information about the products </h1>

              </div>

      );



      const Header = ()=>(

        <header>

            <NavLink to="/about" activeClassName="is-active" >About</NavLink>

            <NavLink to="/" exact={true} activeClassName="is-active" >Products</NavLink>

        </header>

    );



       

      const store = configureStore();

      //loading data from db.json and into the store through the reducers

      store.dispatch(loadProduct());



      return (

        <Provider store={store}>

          <Router>

              <Header/>

              <Switch>

                <Route path="/" exact={true} component={AllProductsPage} />

                <Route path="/about"  component={About}/>

                <Route path="/addProduct" component={AddProductPage} />

                <Route path="/ProductDetail" component={ProductDetail}/>

              </Switch>

          </Router>

        </Provider>

      );

  }

}

AllProductsPage.js

import React, { Component } from "react";

import { connect } from "react-redux";

import { bindActionCreators } from "redux";

import { Link } from "react-router-dom";

import ProductList from "./ProductList";

import * as productActions from "../actions/productActions";

import { Button } from "react-bootstrap";



class AllProductsPage extends Component {

  render() {

    return (

      <div>

        <h1>Product List - Using Redux</h1>

        <ProductList products={this.props.products} />

        <br />

        <Link to="/addProduct"><Button variant="primary">Add Product</Button>{" "}</Link>

      </div>

    );

  }

}



function mapStateToProps(state, ownProps) {

  return {

    products: state.products,

  };

}



function mapDispatchToProps(dispatch) {

  return {

    actions: bindActionCreators(productActions, dispatch),

  };

}



export default connect(mapStateToProps, mapDispatchToProps)(AllProductsPage);

ProductList.js

import React from "react";

import Product from "./Product";

import { Container, Row, Col} from "react-bootstrap";



export default class ProductList extends React.Component {

  render() {

    var productNodes = this.props.products.map((product) => {

      return (

        <Product

          key={product.id}

          id={product.id}

          name={product.name}

          quantity={product.quantity}

          price={product.price}

        >

          {product.text}

        </Product>

      );

    });

    return (

      <div>

        <Container>

          <Row>

          <Col xs="4">

                {productNodes}

              </Col>

          </Row>

        </Container>

      </div>

    );

  }

}

Product.js

import React from "react";

import { Link } from "react-router-dom";

import { Prompt } from "react-router";

import { Card, Button } from "react-bootstrap";

export default class Comment extends React.Component {

  // eslint-disable-next-line

  constructor(props) {

    super(props);

  }



  render() {

    return (

      <Card style={{ width: "18rem" }}>

      <Prompt message={location =>location.pathname.includes("/ProductDetail")?  `Are you sure you want to view the details ?` : true  } />

        <Card.Body>

          <Card.Title>

            {this.props.name}

          </Card.Title>

          <Card.Text>

            Quantity : {this.props.quantity}

          </Card.Text>

          <Card.Title>{this.props.price}</Card.Title>

          <Link to={{pathname: "/ProductDetail",productName:{name : this.props.name}}}>

            <Button variant="primary">View Product</Button>

          </Link>

        </Card.Body>

      </Card>

    );

  }

}

Now this is my first time using react-bootstrap.
So i don't have much clue here.

What i want is like for the cards to be generated in such a way that there should be THREE cards in a row.

Now this is the code i've done so far, but I am confused on how i can make the cards horizontal, without writing <Col> three times, which repeats the same component 3 times in a row.
Please help.