1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="container pb-5 mb-sm-1">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/FF8C00/000000" alt="Clothing"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/FF8C00/000000" alt="Clothing"/><img src="https://www.bootdey.com/image/175x164/FF8C00/000000" alt="Clothing"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Clothing</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$49.99</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop clothing</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/8A2BE2/000000" alt="Shoes"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/8A2BE2/000000" alt="Shoes"/><img src="https://www.bootdey.com/image/175x164/8A2BE2/000000" alt="Shoes"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Shoes</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$56.00</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop shoes</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/6495ED/000000" alt="Bags"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/6495ED/000000" alt="Bags"/><img src="https://www.bootdey.com/image/175x164/6495ED/000000" alt="Bags"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Bags</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$27.00</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop bags</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/FF7F50/000000" alt="Sunglasses"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/FF7F50/000000" alt="Sunglasses"/><img src="https://www.bootdey.com/image/175x164/FF7F50/000000" alt="Sunglasses"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Sunglasses</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$35.99</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop sunglasses</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/008B8B/000000" alt="Hats"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/008B8B/000000" alt="Hats"/><img src="https://www.bootdey.com/image/175x164/008B8B/000000" alt="Hats"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Hats</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$14.50</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop hats</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card border-0 mb-grid-gutter">
<a class="card-img-tiles" href="shop-style1-ls.html">
<div class="main-img"><img src="https://www.bootdey.com/image/340x326/9932CC/000000" alt="Gloves"/></div>
<div class="thumblist"><img src="https://www.bootdey.com/image/175x164/9932CC/000000" alt="Gloves"/><img src="https://www.bootdey.com/image/175x164/9932CC/000000" alt="Gloves"/></div>
</a>
<div class="card-body border mt-n1 py-4 text-center">
<h2 class="h5 mb-1">Gloves</h2><span class="d-block mb-3 font-size-xs text-muted">Starting from <span class="font-weight-semibold">$10.45</span></span><a class="btn btn-pill btn-outline-primary btn-sm" href="shop-style1-ls.html">Shop accessories</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background:#f5f5f5;
margin-top:20px;}
.card-img-tiles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
background-color: #fff;
z-index: 5
}
.card-img-tiles .main-img>img,
.card-img-tiles .thumblist>img {
display: block;
width: 100%
}
.card-img-tiles .main-img {
width: 67%;
padding-right: .375rem
}
.card-img-tiles .thumblist {
width: 33%;
padding-left: .375rem
}
.card-img-tiles .thumblist>img {
margin-bottom: .75rem
}
.card-img-tiles .thumblist>img:last-child {
margin-bottom: 0
}
.mb-grid-gutter {
margin-bottom: 30px !important;
}
