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">
<div class="row ng-scope">
<div class="col-md-3 col-md-push-9">
<h4>Results <span class="fw-semi-bold">Filtering</span></h4>
<p class="text-muted fs-mini">Listed content is categorized by the following groups:</p>
<ul class="nav nav-pills nav-stacked search-result-categories mt">
<li><a href="#/">Friends <span class="badge">34</span></a>
</li>
<li><a href="#/">Pages <span class="badge">9</span></a>
</li>
<li><a href="#/">Images</a>
</li>
<li><a href="#/">Groups</a>
</li>
<li><a href="#/">Globals <span class="badge">18</span></a>
</li>
</ul>
</div>
<div class="col-md-9 col-md-pull-3">
<p class="search-results-count">About 94 700 000 (0.39 sec.) results</p>
<section class="search-result-item">
<a class="image-link" href="#/"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
</a>
<div class="search-result-item-body">
<div class="row">
<div class="col-sm-9">
<h4 class="search-result-item-heading"><a href="#/">john doe</a></h4>
<p class="info">New York, NY 20188</p>
<p class="description">Not just usual Metro. But something bigger. Not just usual widgets, but real widgets. Not just yet another admin template, but next generation admin template.</p>
</div>
<div class="col-sm-3 text-align-center">
<p class="value3 mt-sm">$9, 700</p>
<p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-primary btn-info btn-sm" href="#/">Learn More</a>
</div>
</div>
</div>
</section>
<section class="search-result-item">
<a class="image-link" href="#/"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar6.png"/>
</a>
<div class="search-result-item-body">
<div class="row">
<div class="col-sm-9">
<h4 class="search-result-item-heading"><a href="#/">john doe</a> <span class="badge bg-danger fw-normal pull-right">Best Deal!</span></h4>
<p class="info">Los Angeles, NY 20188</p>
<p class="description">You will never know exactly how something will go until you try it. You can think three hundred times and still have no precise result.</p>
</div>
<div class="col-sm-3 text-align-center">
<p class="value3 mt-sm">$10, 300</p>
<p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-primary btn-info btn-sm" href="#/">Learn More</a>
</div>
</div>
</div>
</section>
<section class="search-result-item">
<a class="image-link" href="#/"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar2.png"/>
</a>
<div class="search-result-item-body">
<div class="row">
<div class="col-sm-9">
<h4 class="search-result-item-heading"><a href="#/">john doe</a></h4>
<p class="info">New York, NY 20188</p>
<p class="description">The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion to Europe of Timur (Tamerlan) from Asia heading a big Army of Belarusians, Lithuanians.</p>
</div>
<div class="col-sm-3 text-align-center">
<p class="value3 mt-sm">$3, 200</p>
<p class="fs-mini text-muted">PER WEEK</p><a class="btn btn-info btn-sm" href="#/">Learn More</a>
</div>
</div>
</div>
</section>
<section class="search-result-item">
<a class="image-link" href="#/"><img class="image" src="https://bootdey.com/img/Content/avatar/avatar3.png"/>
</a>
<div class="search-result-item-body">
<div class="row">
<div class="col-sm-9">
<h4 class="search-result-item-heading"><a href="#/">john doe</a></h4>
<p class="info">Minsk, NY 20188</p>
<p class="description">Yes you can! Further more, you should! It let's you create really beautiful images either for elements or for the entire background.</p>
</div>
<div class="col-sm-3 text-align-center">
<p class="value3 mt-sm">$2, 400</p>
<p class="fs-mini text-muted">PER MONTH</p><a class="btn btn-info btn-sm" href="#/">Learn More</a>
</div>
</div>
</div>
</section>
<div class="text-align-center">
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#/">Prev</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="#/">Next</a>
</li>
</ul>
</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-color: #eee;
}
.search-result-categories>li>a {
color: #b6b6b6;
font-weight: 400
}
.search-result-categories>li>a:hover {
background-color: #ddd;
color: #555
}
.search-result-categories>li>a>.glyphicon {
margin-right: 5px
}
.search-result-categories>li>a>.badge {
float: right
}
.search-results-count {
margin-top: 10px
}
.search-result-item {
padding: 20px;
background-color: #fff;
border-radius: 4px
}
.search-result-item:after,
.search-result-item:before {
content: " ";
display: table
}
.search-result-item:after {
clear: both
}
.search-result-item .image-link {
display: block;
overflow: hidden;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
@media (min-width:768px) {
.search-result-item .image-link {
display: inline-block;
margin: -20px 0 -20px -20px;
float: left;
width: 200px
}
}
@media (max-width:767px) {
.search-result-item .image-link {
max-height: 200px
}
}
.search-result-item .image {
max-width: 100%
}
.search-result-item .info {
margin-top: 2px;
font-size: 12px;
color: #999
}
.search-result-item .description {
font-size: 13px
}
.search-result-item+.search-result-item {
margin-top: 20px
}
@media (min-width:768px) {
.search-result-item-body {
margin-left: 200px
}
}
.search-result-item-heading {
font-weight: 400
}
.search-result-item-heading>a {
color: #555
}
@media (min-width:768px) {
.search-result-item-heading {
margin: 0
}
}
