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-12">
<div class="grid search">
<div class="grid-body">
<div class="row">
<div class="col-md-3">
<h2 class="grid-title"><i class="fa fa-filter"></i> Filters</h2>
<hr/>
<h4>By category:</h4>
<div class="checkbox">
<label><input type="checkbox" class="icheck"/> Application</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="icheck"/> Design</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="icheck"/> Desktop</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="icheck"/> Management</label>
</div>
<div class="checkbox">
<label><input type="checkbox" class="icheck"/> Mobile</label>
</div>
<div class="padding"></div>
<h4>By date:</h4>
From
<div class="input-group date form_date" data-date="2014-06-14T05:25:07Z" data-date-format="dd-mm-yyyy" data-link-field="dtp_input1">
<input type="text" class="form-control"/>
<span class="input-group-addon bg-blue"><i class="fa fa-th"></i></span>
</div>
<input type="hidden" id="dtp_input1" value=""/>
To
<div class="input-group date form_date" data-date="2014-06-14T05:25:07Z" data-date-format="dd-mm-yyyy" data-link-field="dtp_input2">
<input type="text" class="form-control"/>
<span class="input-group-addon bg-blue"><i class="fa fa-th"></i></span>
</div>
<input type="hidden" id="dtp_input2" value=""/>
<div class="padding"></div>
<h4>By price:</h4>
Between <div id="price1">$300</div> to <div id="price2">$800</div>
<div class="slider-primary">
<div class="slider slider-horizontal" style={{/*width: 152px;*/}}><div class="slider-track"><div class="slider-selection" style={{/*left: 30%; width: 50%;*/}}></div><div class="slider-handle round" style={{/*left: 30%;*/}}></div><div class="slider-handle round" style={{/*left: 80%;*/}}></div></div><div class="tooltip top hide" style={{/*top: -30px; left: 50.1px;*/}}><div class="tooltip-arrow"></div><div class="tooltip-inner">300 : 800</div></div><input type="text" class="slider" value="" data-slider-min="0" data-slider-max="1000" data-slider-step="1" data-slider-value="[300,800]" data-slider-tooltip="hide"/></div>
</div>
</div>
<div class="col-md-9">
<h2><i class="fa fa-file-o"></i> Result</h2>
<hr/>
<div class="input-group">
<input type="text" class="form-control" value="web development"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<p>Showing all results matching "web development"</p>
<div class="padding"></div>
<div class="row">
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Order by <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#/">Name</a></li>
<li><a href="#/">Date</a></li>
<li><a href="#/">View</a></li>
<li><a href="#/">Rating</a></li>
</ul>
</div>
</div>
<div class="col-md-6 text-right">
<div class="btn-group">
<button type="button" class="btn btn-default active"><i class="fa fa-list"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-th"></i></button>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover">
<tbody><tr>
<td class="number text-center">1</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/FF8C00" alt=""/></td>
<td class="product"><strong>Product 1</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span></td>
<td class="price text-right">$350</td>
</tr>
<tr>
<td class="number text-center">2</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/5F9EA0" alt=""/></td>
<td class="product"><strong>Product 2</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span></td>
<td class="price text-right">$1,050</td>
</tr>
<tr>
<td class="number text-center">3</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300" alt=""/></td>
<td class="product"><strong>Product 3</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i></span></td>
<td class="price text-right">$550</td>
</tr>
<tr>
<td class="number text-center">4</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/8A2BE2" alt=""/></td>
<td class="product"><strong>Product 4</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span></td>
<td class="price text-right">$330</td>
</tr>
<tr>
<td class="number text-center">5</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300" alt=""/></td>
<td class="product"><strong>Product 5</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></span></td>
<td class="price text-right">$540</td>
</tr>
<tr>
<td class="number text-center">6</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/6495ED" alt=""/></td>
<td class="product"><strong>Product 6</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span></td>
<td class="price text-right">$870</td>
</tr>
<tr>
<td class="number text-center">7</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/DC143C" alt=""/></td>
<td class="product"><strong>Product 7</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span></td>
<td class="price text-right">$620</td>
</tr>
<tr>
<td class="number text-center">8</td>
<td class="image"><img src="https://www.bootdey.com/image/400x300/9932CC" alt=""/></td>
<td class="product"><strong>Product 8</strong><br/>This is the product description.</td>
<td class="rate text-right"><span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i></span></td>
<td class="price text-right">$1,550</td>
</tr>
</tbody></table>
</div>
<ul class="pagination">
<li class="disabled"><a href="#/">«</a></li>
<li class="active"><a href="#/">1</a></li>
<li><a href="#/">2</a></li>
<li><a href="#/">3</a></li>
<li><a href="#/">4</a></li>
<li><a href="#/">5</a></li>
<li><a href="#/">»</a></li>
</ul>
</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;
}
.btn {
margin-bottom: 5px;
}
.grid {
position: relative;
width: 100%;
background: #fff;
color: #666666;
border-radius: 2px;
margin-bottom: 25px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}
.grid .grid-body {
padding: 15px 20px 15px 20px;
font-size: 0.9em;
line-height: 1.9em;
}
.search table tr td.rate {
color: #f39c12;
line-height: 50px;
}
.search table tr:hover {
cursor: pointer;
}
.search table tr td.image {
width: 50px;
}
.search table tr td img {
width: 50px;
height: 50px;
}
.search table tr td.rate {
color: #f39c12;
line-height: 50px;
}
.search table tr td.price {
font-size: 1.5em;
line-height: 50px;
}
.search #price1,
.search #price2 {
display: inline;
font-weight: 600;
}
