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">
<div class="timeline-wrapper">
<div class="pk-timeline">
<div class="pk-tl-block">
<div class="pk-tl-icon"><i class="fa fa-file-text-o"></i></div>
<div class="pk-tl-info"><strong>11-17-2016</strong>
<br/>posted a new blog</div>
<div class="pk-tl-content">
<div class="pk-tl-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""/></div>
<div class="pk-tl-content-text">
<h5>Lorem ipsum dolor sit amet.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam veritatis, excepturi sunt. Nobis maxime voluptate aspernatur vero quisquam provident sint mollitia debitis repellat, voluptas perspiciatis iusto, nulla fuga quia libero!</p>
</div>
</div>
</div>
<div class="pk-tl-block">
<div class="pk-tl-icon"><i class="fa fa-photo"></i></div>
<div class="pk-tl-info"><strong>11-17-2016</strong>
<br/>posted a new blog</div>
<div class="pk-tl-content">
<div class="pk-tl-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/></div>
<div class="pk-tl-content-media"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt=""/></div>
</div>
</div>
<div class="pk-tl-block">
<div class="pk-tl-icon"><i class="fa fa-photo"></i></div>
<div class="pk-tl-info"><strong>11-17-2016</strong>
<br/>posted a new blog</div>
<div class="pk-tl-content">
<div class="pk-tl-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""/></div>
<div class="pk-tl-content-media"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt=""/></div>
</div>
</div>
<div class="pk-tl-block">
<div class="pk-tl-icon"><i class="fa fa-file-text-o"></i></div>
<div class="pk-tl-info"><strong>11-17-2016</strong>
<br/>posted a new blog</div>
<div class="pk-tl-content">
<div class="pk-tl-avatar"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt=""/></div>
<div class="pk-tl-content-text">
<h5>Lorem ipsum dolor sit amet.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam veritatis, excepturi sunt. Nobis maxime voluptate aspernatur vero quisquam provident sint mollitia debitis repellat, voluptas perspiciatis iusto, nulla fuga quia libero!</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{
background:#FCFCFC;
}
.pk-timeline {
position: relative
}
.pk-timeline:before {
content: "";
width: 2px;
background-color: #eceeef;
position: absolute;
top: 0;
bottom: 0;
left: 2rem
}
@media (min-width:768px) {
.pk-timeline:before {
left: 50%
}
}
.pk-tl-block {
position: relative;
padding: 1.5rem;
padding-left: 2rem;
margin-bottom: 1.5rem
}
.pk-tl-block:after {
display: block;
content: "";
clear: both
}
.pk-tl-block:last-child {
margin-bottom: 0
}
@media (min-width:768px) {
.pk-tl-block {
padding-left: 1.5rem;
margin-bottom: 0
}
}
.pk-tl-icon {
width: 50px;
height: 50px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 1.13rem;
font-weight: 600;
border-radius: 500px;
background: #60c84c;
border: 5px solid #fff;
box-shadow: 0 0 1px #ddd;
position: absolute;
top: 1.5rem;
left: 9px
}
@media (min-width:768px) {
.pk-tl-icon {
top: calc(50% - 25px);
left: calc(50% - 25px)
}
}
.pk-tl-info {
position: absolute;
top: 1.5rem;
left: 170px
}
@media (min-width:768px) {
.pk-tl-info {
top: calc(50% - 25px);
left: calc(50% + 50px)
}
.pk-tl-block:nth-child(odd) .pk-tl-info {
right: calc(50% + 50px);
left: auto
}
}
.pk-tl-content {
position: relative;
background: #fff;
border-radius: .25rem;
border: 1px solid #eceeef;
box-shadow: 0 0 12px #eee;
padding: .5rem;
margin-left: 1.5rem;
margin-top: 50px
}
@media (min-width:768px) {
.pk-tl-content {
width: 43%;
margin: 0
}
.pk-tl-block:nth-child(odd) .pk-tl-content {
float: right
}
}
.pk-tl-avatar {
width: 80px;
height: 80px;
padding: 5px;
background: #fff;
border: 1px solid #eceeef;
border-radius: .25rem;
position: absolute;
top: -50px;
left: 20px
}
.pk-tl-avatar img {
width: 100%;
height: 100%;
border-radius: .25rem
}
@media (min-width:768px) {
.pk-tl-avatar {
top: calc(50% - 40px);
right: -35px;
left: auto
}
.pk-tl-block:nth-child(odd) .pk-tl-avatar {
left: -35px;
right: auto
}
}
.pk-tl-content-text {
background: #f7f7f9;
min-height: 100px;
border-radius: .25rem;
padding: 2.5rem 1.5rem 1.5rem
}
.pk-tl-content-text p:last-child {
margin-bottom: 0
}
@media (min-width:768px) {
.pk-tl-content-text {
padding: 1.5rem 3.5rem 1.5rem 1.5rem
}
.pk-tl-block:nth-child(odd) .pk-tl-content-text {
padding: 1.5rem 1.5rem 1.5rem 3.5rem
}
}
.pk-tl-content-media img {
max-width: 100%;
height: auto
}
