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 start
2. 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 again
3. 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="col-xs-12 col-md-6 bootstrap snippets bootdeys">
<div class="product-content product-wrap clearfix">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="product-image">
<img src="https://www.bootdey.com/image/194x228/87CEFA" alt="194x228" class="img-responsive"/>
<span class="tag2 hot">
HOT
</span>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-deatil">
<h5 class="name">
<a href="#/">
Product Name Title Here <span>Category</span>
</a>
</h5>
<p class="price-container">
<span>$99</span>
</p>
<span class="tag1"></span>
</div>
<div class="description">
<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
</div>
<div class="product-info smart-form">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="#/" class="btn btn-success">Add to cart</a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="rating">
<label for="stars-rating-5"><i class="fa fa-star"></i></label>
<label for="stars-rating-4"><i class="fa fa-star"></i></label>
<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 bootstrap snippets bootdeys">
<div class="product-content product-wrap clearfix">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="product-image">
<img src="https://www.bootdey.com/image/194x228/B0C4DE" alt="194x228" class="img-responsive"/>
<span class="tag2 hot">
HOT
</span>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-deatil">
<h5 class="name">
<a href="#/">
Product Name Title Here <span>Category</span>
</a>
</h5>
<p class="price-container">
<span>$99</span>
</p>
<span class="tag1"></span>
</div>
<div class="description">
<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
</div>
<div class="product-info smart-form">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="#/" class="btn btn-success">Add to cart</a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="rating">
<label for="stars-rating-5"><i class="fa fa-star"></i></label>
<label for="stars-rating-4"><i class="fa fa-star"></i></label>
<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 bootstrap snippets bootdeys">
<div class="product-content product-wrap clearfix">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="product-image">
<img src="https://www.bootdey.com/image/194x228/D3D3D3" alt="194x228" class="img-responsive"/>
<span class="tag2 hot">
HOT
</span>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-deatil">
<h5 class="name">
<a href="#/">
Product Name Title Here <span>Category</span>
</a>
</h5>
<p class="price-container">
<span>$99</span>
</p>
<span class="tag1"></span>
</div>
<div class="description">
<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
</div>
<div class="product-info smart-form">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="#/" class="btn btn-success">Add to cart</a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="rating">
<label for="stars-rating-5"><i class="fa fa-star"></i></label>
<label for="stars-rating-4"><i class="fa fa-star"></i></label>
<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 bootstrap snippets bootdeys">
<div class="product-content product-wrap clearfix">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<div class="product-image">
<img src="https://www.bootdey.com/image/194x228/48D1CC" alt="194x228" class="img-responsive"/>
<span class="tag2 hot">
HOT
</span>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="product-deatil">
<h5 class="name">
<a href="#/">
Product Name Title Here <span>Category</span>
</a>
</h5>
<p class="price-container">
<span>$99</span>
</p>
<span class="tag1"></span>
</div>
<div class="description">
<p>Proin in ullamcorper lorem. Maecenas eu ipsum </p>
</div>
<div class="product-info smart-form">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="#/" class="btn btn-success">Add to cart</a>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="rating">
<label for="stars-rating-5"><i class="fa fa-star"></i></label>
<label for="stars-rating-4"><i class="fa fa-star"></i></label>
<label for="stars-rating-3"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-2"><i class="fa fa-star text-primary"></i></label>
<label for="stars-rating-1"><i class="fa fa-star text-primary"></i></label>
</div>
</div>
</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;
}
.product-content {
border: 2px solid #dfe5e9;
margin-bottom: 20px;
margin-top: 12px;
background: #fff;
padding: 4px;
-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
}
.product-content .carousel-control.left {
margin-left: 0
}
.product-content .product-image {
background-color: #fff;
display: block;
min-height: 238px;
overflow: hidden;
position: relative
}
.product-content .product-deatil {
border-bottom: 1px solid #dfe5e9;
padding-bottom: 17px;
padding-left: 16px;
padding-top: 16px;
position: relative;
background: #fff
}
.product-content .product-deatil h5 a {
color: #2f383d;
font-size: 15px;
line-height: 19px;
text-decoration: none;
padding-left: 0;
margin-left: 0
}
.product-content .product-deatil h5 a span {
color: #9aa7af;
display: block;
font-size: 13px
}
.product-content .product-deatil span.tag1 {
border-radius: 50%;
color: #fff;
font-size: 15px;
height: 50px;
padding: 13px 0;
position: absolute;
right: 10px;
text-align: center;
top: 10px;
width: 50px
}
.product-content .product-deatil span.sale {
background-color: #21c2f8
}
.product-content .product-deatil span.discount {
background-color: #71e134
}
.product-content .product-deatil span.hot {
background-color: #fa9442
}
.product-content .description {
font-size: 12.5px;
line-height: 20px;
padding: 10px 14px 16px 19px;
background: #fff
}
.product-content .product-info {
padding: 11px 19px 10px 20px
}
.product-content .product-info a.add-to-cart {
color: #2f383d;
font-size: 13px;
padding-left: 16px
}
.product-content name.a {
padding: 5px 10px;
margin-left: 16px
}
.product-info.smart-form .btn {
padding: 6px 12px;
margin-left: 12px;
margin-top: -10px
}
.product-entry .product-deatil {
border-bottom: 1px solid #dfe5e9;
padding-bottom: 17px;
padding-left: 16px;
padding-top: 16px;
position: relative
}
.product-entry .product-deatil h5 a {
color: #2f383d;
font-size: 15px;
line-height: 19px;
text-decoration: none
}
.product-entry .product-deatil h5 a span {
color: #9aa7af;
display: block;
font-size: 13px
}
.load-more-btn {
background-color: #21c2f8;
border-bottom: 2px solid #037ca5;
border-radius: 2px;
border-top: 2px solid #0cf;
margin-top: 20px;
padding: 9px 0;
width: 100%
}
.product-block .product-deatil p.price-container span,
.product-content .product-deatil p.price-container span,
.product-entry .product-deatil p.price-container span,
.shipping table tbody tr td p.price-container span,
.shopping-items table tbody tr td p.price-container span {
color: #21c2f8;
font-family: Lato, sans-serif;
font-size: 24px;
line-height: 20px
}
.product-info.smart-form .rating label {
margin-top: 0
}
.product-wrap .product-image span.tag2 {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 50%;
padding: 10px 0;
color: #fff;
font-size: 11px;
text-align: center
}
.product-wrap .product-image span.sale {
background-color: #57889c
}
.product-wrap .product-image span.hot {
background-color: #a90329
}
.shop-btn {
position: relative
}
.shop-btn>span {
background: #a90329;
display: inline-block;
font-size: 10px;
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
font-weight: 700;
border-radius: 50%;
padding: 2px 4px 3px!important;
text-align: center;
line-height: normal;
width: 19px;
top: -7px;
left: -7px
}
.description-tabs {
padding: 30px 0 5px!important
}
.description-tabs .tab-content {
padding: 10px 0
}
.product-deatil {
padding: 30px 30px 50px
}
.product-deatil hr+.description-tabs {
padding: 0 0 5px!important
}
.product-deatil .carousel-control.left,
.product-deatil .carousel-control.right {
background: none!important
}
.product-deatil .glyphicon {
color: #3276b1
}
.product-deatil .product-image {
border-right: 0px solid #fff !important
}
.product-deatil .name {
margin-top: 0;
margin-bottom: 0
}
.product-deatil .name small {
display: block
}
.product-deatil .name a {
margin-left: 0
}
.product-deatil .price-container {
font-size: 24px;
margin: 0;
font-weight: 300
}
.product-deatil .price-container small {
font-size: 12px
}
.product-deatil .fa-2x {
font-size: 16px!important
}
.product-deatil .fa-2x>h5 {
font-size: 12px;
margin: 0
}
.product-deatil .fa-2x+a,
.product-deatil .fa-2x+a+a {
font-size: 13px
}
.product-deatil .certified {
margin-top: 10px
}
.product-deatil .certified ul {
padding-left: 0
}
.product-deatil .certified ul li:not(first-child) {
margin-left: -3px
}
.product-deatil .certified ul li {
display: inline-block;
background-color: #f9f9f9;
padding: 13px 19px
}
.product-deatil .certified ul li:first-child {
border-right: none
}
.product-deatil .certified ul li a {
text-align: left;
font-size: 12px;
color: #6d7a83;
line-height: 16px;
text-decoration: none
}
.product-deatil .certified ul li a span {
display: block;
color: #21c2f8;
font-size: 13px;
font-weight: 700;
text-align: center
}
.product-deatil .message-text {
width: calc(100% - 70px)
}
@media only screen and (min-width:1024px) {
.product-content div[class*=col-md-4] {
padding-right: 0
}
.product-content div[class*=col-md-8] {
padding: 0 13px 0 0
}
.product-wrap div[class*=col-md-5] {
padding-right: 0
}
.product-wrap div[class*=col-md-7] {
padding: 0 13px 0 0
}
.product-content .product-image {
border-right: 1px solid #dfe5e9
}
.product-content .product-info {
position: relative
}
}