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 bootstrap snippets bootdey">
<div class="col-md-6">
<div class="panel">
<header class="panel-heading">
goal progress
<span class="tools pull-right">
<a href="#/" class="fa fa-chevron-down"></a>
<a href="#/" class="fa fa-times"></a>
</span>
</header>
<div class="panel-body">
<ul class="goal-progress">
<li>
<div class="prog-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/>
</div>
<div class="details">
<div class="title">
<a href="#/">John Doe</a> - Project Lead
</div>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 70%*/}}>
<span class="">70%</span>
</div>
</div>
</div>
</li>
<li>
<div class="prog-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""/>
</div>
<div class="details">
<div class="title">
<a href="#/">Cameron Doe</a> - Sales
</div>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 91%*/}}>
<span class="">91%</span>
</div>
</div>
</div>
</li>
<li>
<div class="prog-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt=""/>
</div>
<div class="details">
<div class="title">
<a href="#/">Hoffman Doe</a> - Support
</div>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 40%*/}}>
<span class="">40%</span>
</div>
</div>
</div>
</li>
<li>
<div class="prog-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt=""/>
</div>
<div class="details">
<div class="title">
<a href="#/">Jane Doe</a> - Marketing
</div>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 20%*/}}>
<span class="">20%</span>
</div>
</div>
</div>
</li>
<li>
<div class="prog-avatar">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt=""/>
</div>
<div class="details">
<div class="title">
<a href="#/">Hoffman Doe</a> - Support
</div>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style={{/*width: 45%*/}}>
<span class="">45%</span>
</div>
</div>
</div>
</li>
</ul>
<div class="text-center"><a href="#/">View all Goals</a></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;
}
.panel-heading {
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
padding: 15px;
text-transform: uppercase;
color: #535351;
font-size: 14px;
font-weight: bold;
}
.tools a:hover {
background: #65cea7;
color: #fff;
}
.tools a {
background: #E3E4E8;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #858582;
float: left;
margin-left: 3px;
padding: 10px;
text-decoration: none;
}
ul.goal-progress {
list-style-type: none;
padding: 0;
}
ul.goal-progress li {
display: inline-block;
width: 100%;
border-bottom: 1px dashed #dcdcdc;
margin-bottom: 15px;
padding-bottom: 15px;
}
ul.goal-progress li .prog-avatar {
width: 40px;
height: 40px;
float: left;
margin-right: 25px;
}
ul.goal-progress li .prog-avatar img {
width: 100%;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.progress-bar {
box-shadow: none;
line-height: 15px;
text-align: right;
padding-right: 10px;
font-size: 11px;
}
