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 start
2. 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 again
3. 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>
<section class="projects no-padding-top">
<div class="container">
<div class="project">
<div class="row bg-white has-shadow">
<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
<div class="project-title d-flex align-items-center">
<div class="image has-shadow"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="..." class="img-fluid"/></div>
<div class="text">
<h3 class="h4">Project Title</h3><small>Lorem Ipsum Dolor</small>
</div>
</div>
<div class="project-date"><span class="hidden-sm-down">Today at 4:24 AM</span></div>
</div>
<div class="right-col col-lg-6 d-flex align-items-center">
<div class="time"><i class="fa fa-clock-o"></i>12:00 PM </div>
<div class="comments"><i class="fa fa-comment-o"></i>20</div>
<div class="project-progress">
<div class="progress">
<div role="progressbar" style={{/*width: 45%; height: 6px;*/}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-red"></div>
</div>
</div>
</div>
</div>
</div>
<div class="project">
<div class="row bg-white has-shadow">
<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
<div class="project-title d-flex align-items-center">
<div class="image has-shadow"><img src="https://bootdey.com/img/Content/avatar/avatar8.png" alt="..." class="img-fluid"/></div>
<div class="text">
<h3 class="h4">Project Title</h3><small>Lorem Ipsum Dolor</small>
</div>
</div>
<div class="project-date"><span class="hidden-sm-down">Today at 4:24 AM</span></div>
</div>
<div class="right-col col-lg-6 d-flex align-items-center">
<div class="time"><i class="fa fa-clock-o"></i>12:00 PM </div>
<div class="comments"><i class="fa fa-comment-o"></i>20</div>
<div class="project-progress">
<div class="progress">
<div role="progressbar" style={{/*width: 60%; height: 6px;*/}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-green"></div>
</div>
</div>
</div>
</div>
</div>
<div class="project">
<div class="row bg-white has-shadow">
<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
<div class="project-title d-flex align-items-center">
<div class="image has-shadow"><img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="..." class="img-fluid"/></div>
<div class="text">
<h3 class="h4">Project Title</h3><small>Lorem Ipsum Dolor</small>
</div>
</div>
<div class="project-date"><span class="hidden-sm-down">Today at 4:24 AM</span></div>
</div>
<div class="right-col col-lg-6 d-flex align-items-center">
<div class="time"><i class="fa fa-clock-o"></i>12:00 PM </div>
<div class="comments"><i class="fa fa-comment-o"></i>20</div>
<div class="project-progress">
<div class="progress">
<div role="progressbar" style={{/*width: 50%; height: 6px;*/}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-violet"></div>
</div>
</div>
</div>
</div>
</div>
<div class="project">
<div class="row bg-white has-shadow">
<div class="left-col col-lg-6 d-flex align-items-center justify-content-between">
<div class="project-title d-flex align-items-center">
<div class="image has-shadow"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="..." class="img-fluid"/></div>
<div class="text">
<h3 class="h4">Project Title</h3><small>Lorem Ipsum Dolor</small>
</div>
</div>
<div class="project-date"><span class="hidden-sm-down">Today at 4:24 AM</span></div>
</div>
<div class="right-col col-lg-6 d-flex align-items-center">
<div class="time"><i class="fa fa-clock-o"></i>12:00 PM </div>
<div class="comments"><i class="fa fa-comment-o"></i>20</div>
<div class="project-progress">
<div class="progress">
<div role="progressbar" style={{/*width: 50%; height: 6px;*/}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" class="progress-bar bg-orange"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</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;
}
.project .row {
margin: 0;
padding: 15px 0;
margin-bottom: 15px
}
.project div[class*='col-'] {
border-right: 1px solid #eee
}
.project .text h3 {
margin-bottom: 0;
color: #555
}
.project .text small {
color: #aaa;
font-size: 0.75em
}
.project .project-date span {
font-size: 0.9em;
color: #999
}
.project .image {
max-width: 50px;
min-width: 50px;
height: 50px;
margin-right: 15px
}
.project .time,
.project .comments,
.project .project-progress {
color: #999;
font-size: 0.9em;
margin-right: 20px
}
.project .time i,
.project .comments i,
.project .project-progress i {
margin-right: 5px
}
.project .project-progress {
width: 200px
}
.project .project-progress .progress {
height: 4px
}
.project .card {
margin-bottom: 0
}
@media (max-width: 991px) {
.project .right-col {
margin-top: 20px;
margin-left: 65px
}
.project .project-progress {
width: 150px
}
}
@media (max-width: 480px) {
.project .project-progress {
display: none
}
}
.has-shadow {
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.1), -1px 0 2px rgba(0,0,0,0.05);
box-shadow: 2px 2px 2px rgba(0,0,0,0.1), -1px 0 2px rgba(0,0,0,0.05);
}
.bg-white {
background: #fff !important;
}
.bg-red {
background: #ff7676 !important;
color: #fff
}
.bg-red:hover {
color: #fff
}
.bg-blue {
background: #85b4f2 !important;
color: #fff
}
.bg-blue:hover {
color: #fff
}
.bg-yellow {
background: #eef157 !important;
color: #fff
}
.bg-yellow:hover {
color: #fff
}
.bg-green {
background: #54e69d !important;
color: #fff
}
.bg-green:hover {
color: #fff
}
.bg-orange {
background: #ffc36d !important;
color: #fff
}
.bg-orange:hover {
color: #fff
}
.bg-violet {
background: #796AEE !important;
color: #fff
}
.bg-violet:hover {
color: #fff
}
.bg-gray {
background: #ced4da !important
}