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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<ul class="timeline timeline-left">
<li class="timeline-inverted timeline-item">
<div class="timeline-badge success"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="img" class="img-fluid" /></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Genelia</h4>
<p>
<small class="text-muted"><i class="fa fa-clock-o"></i> 11 hours ago via Twitter</small>
</p>
</div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas
suscipit facere rem dicta, debitis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted timeline-item">
<div class="timeline-badge warning"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="img" class="img-fluid" /></div>
<div class="timeline-panel">
<div class="timeline-heading"><h4 class="timeline-title">Ritesh Deshmukh</h4></div>
<div class="timeline-body">
<p><img src="https://www.bootdey.com/image/600x300/FFB6C1/000000" alt="img" class="img-fluid" /></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae
minus eaque facere.
</p>
</div>
</div>
</li>
<li class="timeline-inverted timeline-item">
<div class="timeline-badge danger"><span class="font-12">2018</span></div>
<div class="timeline-panel">
<div class="timeline-heading"><h4 class="timeline-title">Lorem ipsum dolor</h4></div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni
commodi quisquam.
</p>
</div>
</div>
</li>
<li class="timeline-inverted timeline-item">
<div class="timeline-panel">
<div class="timeline-heading"><h4 class="timeline-title">Lorem ipsum dolor</h4></div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero,
omnis ut debitis!
</p>
</div>
</div>
</li>
<li class="timeline-inverted timeline-item">
<div class="timeline-badge info"><i class="fa fa-save"></i></div>
<div class="timeline-panel">
<div class="timeline-heading"><h4 class="timeline-title">Lorem ipsum dolor</h4></div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui!
Laborum, atque.
</p>
<hr />
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle"><i class="fa fa-cog"></i><span class="caret"></span></button>
<div class="dropdown-menu">
<a href="javascript:void(0)" class="dropdown-item">Action</a><a href="javascript:void(0)" class="dropdown-item">Another action</a>
<a href="javascript:void(0)" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="javascript:void(0)" class="dropdown-item">Separated link</a>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-inverted timeline-item">
<div class="timeline-badge success"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-panel">
<div class="timeline-heading"><h4 class="timeline-title">Lorem ipsum dolor</h4></div>
<div class="timeline-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt
quisquam maxime neque eaque.
</p>
</div>
</div>
</li>
</ul>
</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:#dcdcdc;
margin-top:20px;
}
.timeline {
position: relative;
padding: 20px 0;
list-style: none;
max-width: 1200px;
margin: 0 auto;
}
.timeline:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #e9ecef;
}
.timeline > .timeline-item {
position: relative;
margin-bottom: 20px;
}
.timeline > .timeline-item:after,
.timeline > .timeline-item:before {
content: " ";
display: table;
}
.timeline > .timeline-item:after {
clear: both;
}
.timeline > .timeline-item > .timeline-panel {
float: left;
position: relative;
width: 46%;
padding: 20px;
border: 1px solid #e9ecef;
border-radius: 2px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.timeline > .timeline-item > .timeline-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -8px;
border-color: transparent #e9ecef;
border-style: solid;
border-width: 8px 0 8px 8px;
}
.timeline > .timeline-item > .timeline-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -7px;
border-color: transparent #fff;
border-style: solid;
border-width: 7px 0 7px 7px;
}
.timeline > .timeline-item > .timeline-badge {
z-index: 10;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
overflow: hidden;
}
.timeline > .timeline-item.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > .timeline-item.timeline-inverted > .timeline-panel:before {
right: auto;
left: -8px;
border-right-width: 8px;
border-left-width: 0;
}
.timeline > .timeline-item.timeline-inverted > .timeline-panel:after {
right: auto;
left: -7px;
border-right-width: 7px;
border-left-width: 0;
}
.timeline-badge.primary {
background-color: #7460ee;
}
.timeline-badge.success {
background-color: #39c449;
}
.timeline-badge.warning {
background-color: #ffbc34;
}
.timeline-badge.danger {
background-color: #f62d51;
}
.timeline-badge.info {
background-color: #009efb;
}
.timeline-title {
margin-top: 0;
color: inherit;
font-weight: 400;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-left:before {
left: 30px;
}
.timeline-left > .timeline-item > .timeline-badge {
left: 30px;
top: 9px;
}
.timeline-left > .timeline-item > .timeline-panel {
width: calc(100% - 80px);
}
.timeline-right:before {
right: 30px;
left: auto;
}
.timeline-right > .timeline-item > .timeline-badge {
right: 5px;
top: 9px;
left: auto;
}
.timeline-right > .timeline-item > .timeline-panel {
width: calc(100% - 80px);
}
