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="col-xl-4">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Product Traking</h4>
<ul class="list-unstyled activity-wid mb-0">
<li class="activity-list activity-border">
<div class="activity-icon avatar-sm">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="avatar-sm rounded-circle" alt=""/>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">Your Manager Posted</h5>
<p class="text-muted font-size-14 mb-0">James Raphael</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
3 days</p>
</div>
</div>
</div>
</li>
<li class="activity-list activity-border">
<div class="activity-icon avatar-sm">
<span class="avatar-title bg-soft-primary text-primary rounded-circle">
<i class="fa fa-shopping-cart font-size-16"></i>
</span>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">You have 5 pending order.</h5>
<p class="text-muted font-size-14 mb-0">America</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
1 days</p>
</div>
</div>
</div>
</li>
<li class="activity-list activity-border">
<div class="activity-icon avatar-sm">
<span class="avatar-title bg-soft-success text-success rounded-circle">
<i class="fa fa-user font-size-16"></i>
</span>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">New Order Received</h5>
<p class="text-muted font-size-14 mb-0">Thank You</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
Today</p>
</div>
</div>
</div>
</li>
<li class="activity-list activity-border">
<div class="activity-icon avatar-sm">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" class="avatar-sm rounded-circle" alt=""/>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">Your Manager Posted</h5>
<p class="text-muted font-size-14 mb-0">James Raphael</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
3 days</p>
</div>
</div>
</div>
</li>
<li class="activity-list activity-border">
<div class="activity-icon avatar-sm">
<span class="avatar-title bg-soft-primary text-primary rounded-circle">
<i class="fa fa-shopping-cart font-size-16"></i>
</span>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">You have 1 pending order.</h5>
<p class="text-muted font-size-14 mb-0">Dubai</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
1 days</p>
</div>
</div>
</div>
</li>
<li class="activity-list">
<div class="activity-icon avatar-sm">
<span class="avatar-title bg-soft-success text-success rounded-circle">
<i class="fa fa-user font-size-16"></i>
</span>
</div>
<div class="media">
<div class="me-3">
<h5 class="font-size-15 mb-1">New Order Received</h5>
<p class="text-muted font-size-14 mb-0">Thank You</p>
</div>
<div class="media-body">
<div class="text-end d-none d-md-block">
<p class="text-muted font-size-13 mt-2 pt-1 mb-0"><i class="fa fa-calendar font-size-15 text-primary"></i>
Today</p>
</div>
</div>
</div>
</li>
</ul>
</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-color: #f5f7fa;
margin-top:20px;
}
.card {
margin-bottom: 24px;
-webkit-box-shadow: 0 2px 4px rgb(126 142 177 / 10%);
box-shadow: 0 2px 4px rgb(126 142 177 / 10%);
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0 solid #eaedf1;
border-radius: .25rem;
}
.activity-wid {
margin-left: 16px;
}
.mb-0 {
margin-bottom: 0!important;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.activity-wid .activity-list {
position: relative;
padding: 0 0 33px 30px;
}
.activity-border:before {
content: "";
position: absolute;
height: 38px;
border-left: 3px dashed #eaedf1;
top: 40px;
left: 0;
}
.activity-wid .activity-list .activity-icon {
position: absolute;
left: -20px;
top: 0;
z-index: 2;
}
.avatar-sm {
height: 2.5rem;
width: 2.5rem;
}
.media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.me-3 {
margin-right: 1rem!important;
}
.font-size-15 {
font-size: 15px!important;
}
.font-size-14 {
font-size: 14px!important;
}
.text-muted {
color: #74788d!important;
}
.text-end {
text-align: right!important;
}
.font-size-13 {
font-size: 13px!important;
}
.avatar-title {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.bg-soft-primary {
background-color: rgba(82,92,229,.25)!important;
}
.bg-soft-success {
background-color: rgba(35,197,143,.25)!important;
}
