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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="ibox">
<div class="ibox-content product-box">
<div class="product-imitation">
[ INFO ]
</div>
<div class="product-desc">
<span class="product-price">
$10
</span>
<small class="text-muted">Category</small>
<a href="#/" class="product-name"> Product</a>
<div class="small m-t-xs">
Many desktop publishing packages and web page editors now.
</div>
<div class="m-t text-righ">
<a href="#/" class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox">
<div class="ibox-content product-box">
<div class="product-imitation">
[ INFO ]
</div>
<div class="product-desc">
<span class="product-price">
$10
</span>
<small class="text-muted">Category</small>
<a href="#/" class="product-name"> Product</a>
<div class="small m-t-xs">
Many desktop publishing packages and web page editors now.
</div>
<div class="m-t text-righ">
<a href="#/" class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox">
<div class="ibox-content product-box active">
<div class="product-imitation">
[ INFO ]
</div>
<div class="product-desc">
<span class="product-price">
$10
</span>
<small class="text-muted">Category</small>
<a href="#/" class="product-name"> Product</a>
<div class="small m-t-xs">
Many desktop publishing packages and web page editors now.
</div>
<div class="m-t text-righ">
<a href="#/" class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="ibox">
<div class="ibox-content product-box">
<div class="product-imitation">
[ INFO ]
</div>
<div class="product-desc">
<span class="product-price">
$10
</span>
<small class="text-muted">Category</small>
<a href="#/" class="product-name"> Product</a>
<div class="small m-t-xs">
Many desktop publishing packages and web page editors now.
</div>
<div class="m-t text-righ">
<a href="#/" class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>
</div>
</div>
</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{margin-top:20px;
background:#eee;
}
/* E-commerce */
.product-box {
padding: 0;
border: 1px solid #e7eaec;
}
.product-box:hover,
.product-box.active {
border: 1px solid transparent;
-webkit-box-shadow: 0 3px 7px 0 #a8a8a8;
-moz-box-shadow: 0 3px 7px 0 #a8a8a8;
box-shadow: 0 3px 7px 0 #a8a8a8;
}
.product-imitation {
text-align: center;
padding: 90px 0;
background-color: #f8f8f9;
color: #bebec3;
font-weight: 600;
}
.cart-product-imitation {
text-align: center;
padding-top: 30px;
height: 80px;
width: 80px;
background-color: #f8f8f9;
}
.product-imitation.xl {
padding: 120px 0;
}
.product-desc {
padding: 20px;
position: relative;
}
.ecommerce .tag-list {
padding: 0;
}
.ecommerce .fa-star {
color: #d1dade;
}
.ecommerce .fa-star.active {
color: #f8ac59;
}
.ecommerce .note-editor {
border: 1px solid #e7eaec;
}
table.shoping-cart-table {
margin-bottom: 0;
}
table.shoping-cart-table tr td {
border: none;
text-align: right;
}
table.shoping-cart-table tr td.desc,
table.shoping-cart-table tr td:first-child {
text-align: left;
}
table.shoping-cart-table tr td:last-child {
width: 80px;
}
.product-name {
font-size: 16px;
font-weight: 600;
color: #676a6c;
display: block;
margin: 2px 0 5px 0;
}
.product-name:hover,
.product-name:focus {
color: #1ab394;
}
.product-price {
font-size: 14px;
font-weight: 600;
color: #ffffff;
background-color: #1ab394;
padding: 6px 12px;
position: absolute;
top: -32px;
right: 0;
}
.product-detail .ibox-content {
padding: 30px 30px 50px 30px;
}
.image-imitation {
background-color: #f8f8f9;
text-align: center;
padding: 200px 0;
}
.product-main-price small {
font-size: 10px;
}
.product-images {
margin: 0 20px;
}
.ibox {
clear: both;
margin-bottom: 25px;
margin-top: 0;
padding: 0;
}
.ibox.collapsed .ibox-content {
display: none;
}
.ibox.collapsed .fa.fa-chevron-up:before {
content: "\f078";
}
.ibox.collapsed .fa.fa-chevron-down:before {
content: "\f077";
}
.ibox:after,
.ibox:before {
display: table;
}
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 3px 0 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
min-height: 48px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.ibox-footer {
color: inherit;
border-top: 1px solid #e7eaec;
font-size: 90%;
background: #ffffff;
padding: 10px 15px;
}
