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="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="card-title mb-5">Horizontal Timeline</h4>
<div class="hori-timeline" dir="ltr">
<ul class="list-inline events">
<li class="list-inline-item event-list">
<div class="px-4">
<div class="event-date bg-soft-primary text-primary">2 June</div>
<h5 class="font-size-16">Event One</h5>
<p class="text-muted">It will be as simple as occidental in fact it will be Occidental Cambridge friend</p>
<div>
<a href="#/" class="btn btn-primary btn-sm">Read more</a>
</div>
</div>
</li>
<li class="list-inline-item event-list">
<div class="px-4">
<div class="event-date bg-soft-success text-success">5 June</div>
<h5 class="font-size-16">Event Two</h5>
<p class="text-muted">Everyone realizes why a new common language one could refuse translators.</p>
<div>
<a href="#/" class="btn btn-primary btn-sm">Read more</a>
</div>
</div>
</li>
<li class="list-inline-item event-list">
<div class="px-4">
<div class="event-date bg-soft-danger text-danger">7 June</div>
<h5 class="font-size-16">Event Three</h5>
<p class="text-muted">If several languages coalesce the grammar of the resulting simple and regular</p>
<div>
<a href="#/" class="btn btn-primary btn-sm">Read more</a>
</div>
</div>
</li>
<li class="list-inline-item event-list">
<div class="px-4">
<div class="event-date bg-soft-warning text-warning">8 June</div>
<h5 class="font-size-16">Event Four</h5>
<p class="text-muted">Languages only differ in their pronunciation and their most common words.</p>
<div>
<a href="#/" class="btn btn-primary btn-sm">Read more</a>
</div>
</div>
</li>
</ul>
</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:#eee;
margin-top:20px;
}
.hori-timeline .events {
border-top: 3px solid #e9ecef;
}
.hori-timeline .events .event-list {
display: block;
position: relative;
text-align: center;
padding-top: 70px;
margin-right: 0;
}
.hori-timeline .events .event-list:before {
content: "";
position: absolute;
height: 36px;
border-right: 2px dashed #dee2e6;
top: 0;
}
.hori-timeline .events .event-list .event-date {
position: absolute;
top: 38px;
left: 0;
right: 0;
width: 75px;
margin: 0 auto;
border-radius: 4px;
padding: 2px 4px;
}
@media (min-width: 1140px) {
.hori-timeline .events .event-list {
display: inline-block;
width: 24%;
padding-top: 45px;
}
.hori-timeline .events .event-list .event-date {
top: -12px;
}
}
.bg-soft-primary {
background-color: rgba(64,144,203,.3)!important;
}
.bg-soft-success {
background-color: rgba(71,189,154,.3)!important;
}
.bg-soft-danger {
background-color: rgba(231,76,94,.3)!important;
}
.bg-soft-warning {
background-color: rgba(249,213,112,.3)!important;
}
.card {
border: none;
margin-bottom: 24px;
-webkit-box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
box-shadow: 0 0 13px 0 rgba(236,236,241,.44);
}
