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.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card-body">
<h4 class="card-title">Reviews</h4>
<h5 class="card-subtitle">Overview of Review</h5>
<h2 class="font-medium mt-5 mb-0">25426</h2>
<span class="text-muted">This month we got 346 New Reviews</span>
<div class="image-box mt-4 mb-4">
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Simmons"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Fitz"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Phil"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Melinda"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle" width="45" alt="user"/></a>
</div>
<a href="javascript:void(0)" class="btn btn-lg btn-info waves-effect waves-light">Checkout All Reviews</a>
</div>
</div>
<div class="col-sm-12 col-lg-8 border-left">
<div class="card-body">
<ul class="list-style-none">
<li class="mt-4">
<div class="d-flex align-items-center">
<i class="fa fa-smile-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Positive Reviews</h5>
<span class="text-muted">25547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style={{/*width: 47%*/}} aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="mt-5">
<div class="d-flex align-items-center">
<i class="fa fa-frown-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Negative Reviews</h5>
<span class="text-muted">5547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-orange" role="progressbar" style={{/*width: 33%*/}} aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="mt-5 mb-5">
<div class="d-flex align-items-center">
<i class="fa fa-meh-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Neutral Reviews</h5>
<span class="text-muted">547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style={{/*width: 20%*/}} aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="card-body">
<h4 class="card-title">Reviews</h4>
<h5 class="card-subtitle">Overview of Review</h5>
<h2 class="font-medium mt-5 mb-0">25426</h2>
<span class="text-muted">This month we got 346 New Reviews</span>
<div class="image-box mt-4 mb-4">
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Simmons"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Fitz"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Phil"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle" width="45" alt="user"/></a>
<a href="#/" class="mr-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="Melinda"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle" width="45" alt="user"/></a>
</div>
<a href="javascript:void(0)" class="btn btn-lg btn-info waves-effect waves-light">Checkout All Reviews</a>
</div>
</div>
<div class="col-sm-12 col-lg-8 border-left">
<div class="card-body">
<ul class="list-style-none">
<li class="mt-4">
<div class="d-flex align-items-center">
<i class="fa fa-smile-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Positive Reviews</h5>
<span class="text-muted">25547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style={{/*width: 47%*/}} aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="mt-5">
<div class="d-flex align-items-center">
<i class="fa fa-frown-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Negative Reviews</h5>
<span class="text-muted">5547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-orange" role="progressbar" style={{/*width: 33%*/}} aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="mt-5 mb-5">
<div class="d-flex align-items-center">
<i class="fa fa-meh-o display-5 text-muted"></i>
<div class="ml-2">
<h5 class="mb-0">Neutral Reviews</h5>
<span class="text-muted">547 Reviews</span></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style={{/*width: 20%*/}} aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</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{
background: #edf1f5;
margin-top:20px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0 solid transparent;
border-radius: 0;
margin-top:20px;
}
.text-muted {
color: #8898aa!important;
}
.card .card-subtitle {
font-weight: 300;
margin-bottom: 10px;
color: #8898aa;
}
ul.list-style-none li {
list-style: none;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #707cd2;
transition: width .6s ease;
}
.progress {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
-o-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.progress {
display: flex;
height: 4px;
overflow: hidden;
font-size: .65625rem;
background-color: rgba(120,130,140,.13);
border-radius: 0;
box-shadow: inset 0 0.1rem 0.1rem rgba(0,0,0,.1);
}
.display-5 {
font-size: 50px !important;
font-weight: bold;
line-height: 1.2;
}
