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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel">
<div class="panel-body profile-information">
<div class="col-md-3">
<div class="profile-pic text-center">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/>
</div>
</div>
<div class="col-md-9">
<div class="profile-desk text-center">
<h1>Deyson Bejarano</h1>
<span class="text-muted">Project Manager</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet. Ut auctor accumsan erat, a vulputate metus tristique non. Aliquam aliquam vel orci quis sagittis.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel act-content">
<div class="recent-act">
<div class="activity-icon terques">
<i class="fa fa-check"></i>
</div>
<div class="activity-desk">
<h2>1 Hour Ago</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p>
</div>
<div class="activity-icon terques">
<i class="fa fa-list"></i>
</div>
<div class="activity-desk">
<h2>2 Hour Ago</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p>
</div>
<div class="activity-icon terques">
<i class="fa fa-envelope"></i>
</div>
<div class="activity-desk">
<h2>3 Days Ago</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porttitor vestibulum imperdiet</p>
</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{
margin-top:20px;
color: #ccc;
background-color: #f1f2f7;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
.profile-information .profile-pic img {
width: 160px;
height: 160px;
border-radius: 50%;
-webkit-border-radius: 50%;
border: 10px solid #f1f2f7;
margin-top: 20px;
}
.profile-information .profile-desk h1 {
color: #1fb5ad;
font-size: 24px;
font-weight: bold;
margin-bottom: 0;
}
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.profile-information .profile-desk {
border-right: 1px solid #ddd;
padding-right: 30px;
}
.btn-primary {
background-color: #1fb5ad;
border-color: #1fb5ad;
color: #FFFFFF;
}
.act-content{
padding:40px;
}
.recent-act h1 {
text-align: center;
color: #1fb5ad;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.activity-icon {
border-radius: 50%;
-webkit-border-radius: 50%;
color: #FFFFFF;
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
margin: 20px auto 20px;
position: relative;
}
.activity-icon.terques {
background: #8fd6d6;
}
.activity-icon {
background: #C7CBD6;
}
.recent-act:before {
background-color: #eeeeee;
bottom: 0;
content: "";
left: 50%;
position: absolute;
top: 50px;
width: 2px;
z-index: 0;
}
.activity-desk {
padding: 15px 30px;
background: #f2f2f2;
border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
text-align: center;
}
.activity-desk h2 {
color: #1fb5ad;
font-size: 14px;
font-weight: bold;
margin: 0 0 10px 0;
text-transform: uppercase;
}