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="content">
<div class="container">
<div class="row">
<div class="col-sm-4">
<button type="button" class="btn btn-custom btn-rounded w-md waves-effect waves-light mb-4"><i class="mdi mdi-plus-circle"></i> Create Project</button>
</div>
<div class="col-sm-8">
<div class="project-sort float-right">
<div class="project-sort-item">
<form class="form-inline">
<div class="form-group">
<label for="phase-select">Phase :</label>
<select class="form-control ml-2 form-control-sm" id="phase-select">
<option>All Projects(6)</option>
<option>Complated</option>
<option>Progress</option>
</select>
</div>
<div class="form-group">
<label for="sort-select">Sort :</label>
<select class="form-control ml-2 form-control-sm" id="sort-select">
<option>Date</option>
<option>Name</option>
<option>End date</option>
<option>Start Date</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Orange Limited</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">New Admin Design</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">124</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">452</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">85</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="James Anderson"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Username"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">55/85</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{/*width: 80%;*/}}></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Moondust Softwares</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">App Design and Development</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">94</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">845</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">39</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Username"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">22/39</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style={{/*width: 78%;*/}}></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Rose Technologies</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">Landing page Design</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">845</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">1,025</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">120</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="James Anderson"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">92/120</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style={{/*width: 76%;*/}}></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Apple Navigations</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">Custom Software Development</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">894</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">1,874</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">245</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="James Anderson"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Username"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">87/245</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style={{/*width: 30%;*/}}></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Enigma Navigations</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">Website Redesign</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">95</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">321</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">154</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="James Anderson"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Username"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">89/154</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style={{/*width: 82%;*/}}></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card-box project-box">
<div class="dropdown float-right"><a href="#/" class="dropdown-toggle card-drop arrow-none" data-toggle="dropdown" aria-expanded="false"><h3 class="m-0 text-muted"><i class="mdi mdi-dots-horizontal"></i></h3></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"><a class="dropdown-item" href="#/">Edit</a> <a class="dropdown-item" href="#/">Delete</a> <a class="dropdown-item" href="#/">Add Members</a> <a class="dropdown-item" href="#/">Add Due Date</a></div>
</div>
<p class="text-muted text-uppercase mb-0 font-13">Pride Softwares</p>
<h4 class="mt-0 mb-3"><a href="" class="text-dark">Multipurpose Landing Template</a></h4>
<p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. When an unknown printer took a galley of type and scrambled it...<a href="#/" class="font-600 text-muted">view more</a></p>
<ul class="list-inline">
<li class="list-inline-item">
<h3 class="mb-0">124</h3>
<p class="text-muted">Attachments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">452</h3>
<p class="text-muted">Comments</p>
</li>
<li class="list-inline-item">
<h3 class="mb-0">85</h3>
<p class="text-muted">Tasks</p>
</li>
</ul>
<div class="project-members mb-4">
<label class="mr-3">Team :</label>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michael Zenaty"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="James Anderson"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Mat Helme"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="rounded-circle thumb-sm" alt="friend"/> </a>
<a href="#/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Username"><img src="https://bootdey.com/img/Content/avatar/avatar5.png" class="rounded-circle thumb-sm" alt="friend"/></a>
</div>
<label class="">Task completed: <span class="text-custom">55/85</span></label>
<div class="progress mb-1" style={{/*height: 7px;*/}}>
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style={{/*width: 80%;*/}}></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="text-center mb-3"><a href="" class="btn btn-danger btn-lg waves-effect waves-light"><i class="mdi mdi-refresh"></i> Load More Projects</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:#DCDCDC;
}
.card-box {
padding: 20px;
border-radius: 3px;
margin-bottom: 30px;
background-color: #fff;
}
.project-box {
position: relative
}
.project-box .badge {
position: absolute;
right: 20px
}
.project-box h4 {
text-overflow: ellipsis;
white-space: nowrap;
display: block;
width: 100%;
overflow: hidden
}
.project-box ul li {
padding-right: 30px
}
.project-box .project-members a {
margin: 0 0 10px -12px;
display: inline-block;
border: 3px solid #fff;
border-radius: 50%;
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02)
}
.project-box .project-members a:first-of-type {
margin-left: 0
}
.thumb-sm {
height: 36px;
width: 36px;
}
.font-13 {
font-size: 13px!important;
}
.text-dark {
color: #313a46!important;
}
