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 bootdey">
<div class="col-md-3">
<section class="panel">
<div class="panel-body">
<input type="text" placeholder="Keyword Search" class="form-control" />
</div>
</section>
<section class="panel">
<header class="panel-heading">
Category
</header>
<div class="panel-body">
<ul class="nav prod-cat">
<li>
<a href="#/" class="active"><i class="fa fa-angle-right"></i> Dress</a>
<ul class="nav">
<li class="active"><a href="#/">- Shirt</a></li>
<li><a href="#/">- Pant</a></li>
<li><a href="#/">- Shoes</a></li>
</ul>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Bags & Purses</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Beauty</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Coat & Jacket</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Jeans</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Jewellery</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Electronics</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Sports</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Technology</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Watches</a>
</li>
<li>
<a href="#/"><i class="fa fa-angle-right"></i> Accessories</a>
</li>
</ul>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Price Range
</header>
<div class="panel-body sliders">
<div id="slider-range" class="slider"></div>
<div class="slider-info">
<span id="slider-range-amount"></span>
</div>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Filter
</header>
<div class="panel-body">
<form role="form product-form">
<div class="form-group">
<label>Brand</label>
<select class="form-control hasCustomSelect" style={{/*-webkit-appearance: menulist-button; width: 231px; position: absolute; opacity: 0; height: 34px; font-size: 12px;*/}}>
<option>Wallmart</option>
<option>Catseye</option>
<option>Moonsoon</option>
<option>Textmart</option>
</select>
<span class="customSelect form-control" style={{/*display: inline-block;*/}}><span class="customSelectInner" style={{/*width: 209px; display: inline-block;*/}}>Wallmart</span></span>
</div>
<div class="form-group">
<label>Color</label>
<select class="form-control hasCustomSelect" style={{/*-webkit-appearance: menulist-button; width: 231px; position: absolute; opacity: 0; height: 34px; font-size: 12px;*/}}>
<option>White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
</select>
<span class="customSelect form-control" style={{/*display: inline-block;*/}}><span class="customSelectInner" style={{/*width: 209px; display: inline-block;*/}}>White</span></span>
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control hasCustomSelect" style={{/*-webkit-appearance: menulist-button; width: 231px; position: absolute; opacity: 0; height: 34px; font-size: 12px;*/}}>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Extra Large</option>
</select>
<span class="customSelect form-control" style={{/*display: inline-block;*/}}><span class="customSelectInner" style={{/*width: 209px; display: inline-block;*/}}>Small</span></span>
</div>
<button class="btn btn-primary" type="submit">Filter</button>
</form>
</div>
</section>
<section class="panel">
<header class="panel-heading">
Best Seller
</header>
<div class="panel-body">
<div class="best-seller">
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://www.bootdey.com/image/250x220/FFB6C1/000000" />
</a>
<div class="media-body">
<a href="#/" class="p-head">Item One Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://www.bootdey.com/image/250x220/A2BE2/000000" />
</a>
<div class="media-body">
<a href="#/" class="p-head">Item Two Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
<article class="media">
<a class="pull-left thumb p-thumb">
<img src="https://www.bootdey.com/image/250x220/6495ED/000000" />
</a>
<div class="media-body">
<a href="#/" class="p-head">Item Three Tittle</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</article>
</div>
</div>
</section>
</div>
<div class="col-md-9">
<section class="panel">
<div class="panel-body">
<div class="pull-right">
<ul class="pagination pagination-sm pro-page-list">
<li><a href="#/">1</a></li>
<li><a href="#/">2</a></li>
<li><a href="#/">3</a></li>
<li><a href="#/">ยป</a></li>
</ul>
</div>
</div>
</section>
<div class="row product-list">
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/FFB6C1/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/6495ED/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/FF7F50/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/00BFFF/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/00CED1/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/9400D3/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/FFD700/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/ADD8E6/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/20B2AA/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/3CB371/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/FFB6C1/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/C71585/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/191970/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/87CEEB/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel">
<div class="pro-img-box">
<img src="https://www.bootdey.com/image/250x220/FFB6C1/000000" alt="" />
<a href="#/" class="adtocart">
<i class="fa fa-shopping-cart"></i>
</a>
</div>
<div class="panel-body text-center">
<h4>
<a href="#/" class="pro-title">
Leopard Shirt Dress
</a>
</h4>
<p class="price">$300.00</p>
</div>
</section>
</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:#f1f2f7;
}
/*panel*/
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
border-color:#eff2f7 ;
font-size: 16px;
font-weight: 300;
}
.panel-title {
color: #2A3542;
font-size: 14px;
font-weight: 400;
margin-bottom: 0;
margin-top: 0;
font-family: 'Open Sans', sans-serif;
}
/*product list*/
.prod-cat li a{
border-bottom: 1px dashed #d9d9d9;
}
.prod-cat li a {
color: #3b3b3b;
}
.prod-cat li ul {
margin-left: 30px;
}
.prod-cat li ul li a{
border-bottom:none;
}
.prod-cat li ul li a:hover,.prod-cat li ul li a:focus, .prod-cat li ul li.active a , .prod-cat li a:hover,.prod-cat li a:focus, .prod-cat li a.active{
background: none;
color: #ff7261;
}
.pro-lab{
margin-right: 20px;
font-weight: normal;
}
.pro-sort {
padding-right: 20px;
float: left;
}
.pro-page-list {
margin: 5px 0 0 0;
}
.product-list img{
width: 100%;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
.product-list .pro-img-box {
position: relative;
}
.adtocart {
background: #fc5959;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-border-radius: 50%;
color: #fff;
display: inline-block;
text-align: center;
border: 3px solid #fff;
left: 45%;
bottom: -25px;
position: absolute;
}
.adtocart i{
color: #fff;
font-size: 25px;
line-height: 42px;
}
.pro-title {
color: #5A5A5A;
display: inline-block;
margin-top: 20px;
font-size: 16px;
}
.product-list .price {
color:#fc5959 ;
font-size: 15px;
}
.pro-img-details {
margin-left: -15px;
}
.pro-img-details img {
width: 100%;
}
.pro-d-title {
font-size: 16px;
margin-top: 0;
}
.product_meta {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 10px 0;
margin: 15px 0;
}
.product_meta span {
display: block;
margin-bottom: 10px;
}
.product_meta a, .pro-price{
color:#fc5959 ;
}
.pro-price, .amount-old {
font-size: 18px;
padding: 0 10px;
}
.amount-old {
text-decoration: line-through;
}
.quantity {
width: 120px;
}
.pro-img-list {
margin: 10px 0 0 -15px;
width: 100%;
display: inline-block;
}
.pro-img-list a {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.pro-d-head {
font-size: 18px;
font-weight: 300;
}