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="col-lg-12 col-xl-8">
<div class="card m-b-30">
<div class="card-header">
<h5 class="card-title mb-0">Sales by Country</h5>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-6 col-lg-3">
<div class="border-primary border rounded text-center py-3 mb-3">
<h5 class="card-title text-primary mb-1">$4000</h5>
<p class="text-primary mb-0">Sales</p>
</div>
<div class="border-success border rounded text-center py-3 mb-3">
<h5 class="card-title text-success mb-1">$2000</h5>
<p class="text-success mb-0">Revenue</p>
</div>
<div class="border-warning border rounded text-center py-3">
<h5 class="card-title text-warning mb-1">$200</h5>
<p class="text-warning mb-0">Refund</p>
</div>
</div>
<div class="col-6 col-lg-9">
<p>USA <span class="float-right">55%</span></p>
<div class="progress mb-3" style={{/*height: 5px;*/}}>
<div class="progress-bar" role="progressbar" style={{/*width: 55%;*/}} aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>UK <span class="float-right">20%</span></p>
<div class="progress mb-3" style={{/*height: 5px;*/}}>
<div class="progress-bar bg-success" role="progressbar" style={{/*width: 20%;*/}} aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Canada <span class="float-right">15%</span></p>
<div class="progress mb-3" style={{/*height: 5px;*/}}>
<div class="progress-bar bg-warning" role="progressbar" style={{/*width: 15%;*/}} aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Australia <span class="float-right">10%</span></p>
<div class="progress" style={{/*height: 5px;*/}}>
<div class="progress-bar bg-info" role="progressbar" style={{/*width: 10%;*/}} aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></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{
background:#eee;
margin-top:20px;
}
.card-header {
border-bottom: 1px solid transparent;
background-color: transparent;
}
