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 id="schedule" class="pt90 pb90">
<div class="container">
<div class="row">
<div class="col-sm-8 mr-auto ml-auto text-center">
<div class="center-title mb60">
<h2>Event Schedule</h2>
<p class="lead">
02 - 04 November 2016.
</p>
</div>
</div>
</div>
<div class="row margin-b-30">
<div class="col-md-10 mr-auto ml-auto">
<div>
<ul class="nav tabs-schedule nav-tabs list-inline" role="tablist">
<li role="presentation" class="nav-item"><a class="nav-link active show" href="#01" aria-controls="01" role="tab" data-toggle="tab" aria-selected="true">Day 1 <span>1 November 2016</span></a></li>
<li role="presentation" class="nav-item"><a class="nav-link" href="#02" aria-controls="02" role="tab" data-toggle="tab" aria-selected="false">Day 2 <span>2 November 2016</span></a></li>
<li role="presentation" class="nav-item"><a class="nav-link" href="#03" aria-controls="03" role="tab" data-toggle="tab" aria-selected="false">Day 3 <span>3 November 2016</span></a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active show" id="01">
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>9:00 AM to 10:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Introducing bootstrap4 features</a></h3>
<div class="row margin-b-20">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Nikita Miller</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Johathan Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>11:00 AM to 11:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Roadmap about bootstrap updates</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Robert</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30" style={{/*opacity: 0.7;*/}}>
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>1:00 AM to 2:00 AM</span>
<span class="event-hall">Fulkari Restaurant</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">lunch</a></h3>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>2:00 AM to 4:30 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Bootstrap with AngularJs</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Smitha Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="02">
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>9:00 AM to 10:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Introducing bootstrap4 features</a></h3>
<div class="row margin-b-20">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Nikita Miller</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Johathan Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>11:00 AM to 11:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Roadmap about bootstrap updates</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Robert</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30" style={{/*opacity: 0.7;*/}}>
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>1:00 AM to 2:00 AM</span>
<span class="event-hall">Fulkari Restaurant</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">lunch</a></h3>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 event-info">
<span>Monday</span>
<span>2:00 AM to 4:30 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Bootstrap with AngularJs</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Smitha Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade " id="03">
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Wednesday</span>
<span>9:00 AM to 10:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Lorem ipsum dolor sit amet</a></h3>
<div class="row margin-b-20">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>John Miller</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Adam Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30">
<div class="col-sm-3 event-info">
<span>Wednesday</span>
<span>11:00 AM to 11:45 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Roadmap about bootstrap updates</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Robert</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
<div class="row margin-b-30" style={{/*opacity: 0.7;*/}}>
<div class="col-sm-3 event-info">
<span>Wednesday</span>
<span>1:00 AM to 2:00 AM</span>
<span class="event-hall">Fulkari Restaurant</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">lunch</a></h3>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
<div class="row">
<div class="col-sm-3 event-info">
<span>Wednesday</span>
<span>2:00 AM to 4:30 AM</span>
<span class="event-hall">Basement R1</span>
</div>
<div class="col-sm-9 event-detail">
<h3><a href="#/">Closing ceremony</a></h3>
<div class="row">
<div class="col-sm-2">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-fluid"/>
</div>
<div class="col-sm-10">
<h4>Smitha Doe</h4>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings, the master-builder of human happiness
</p>
</div>
</div>
</div>
</div>
</div>
</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;
background:#f8f8f8;
}
/*
schedule
*/
.tabs-schedule.nav-tabs {
border: 0px;
border-bottom: 2px solid #f5f5f5;
margin-bottom: 40px;
margin-left: 0px;
text-align: center;
}
.tabs-schedule.nav-tabs > li {
padding: 0px;
}
.tabs-schedule.nav-tabs > li > a {
font-size: 20px;
display: block;
padding: 4px 20px;
color: #333;
font-family: "Open Sans", sans-serif;
font-weight: 700;
margin-bottom: -2px;
position: relative;
border: 0px;
}
.tabs-schedule.nav-tabs > li > a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #8bcb26;
transition: all .3s;
-webkit-transition: all .3s;
}
.tabs-schedule.nav-tabs > li > a span {
font-size: 12px;
display: block;
color: #999;
font-family: #8bcb26;
font-weight: 400;
}
.tabs-schedule.nav-tabs > li > a.active,
.tabs-schedule.nav-tabs > li > a:hover {
color: #8bcb26;
}
.tabs-schedule.nav-tabs > li > a.active:after,
.tabs-schedule.nav-tabs > li > a:hover:after {
width: 100%;
}
.event-info {
padding-right: 30px;
text-align: right;
text-transform: uppercase;
}
.event-info span {
display: block;
font-size: 16px;
}
.event-info .event-hall {
margin-top: 10px;
font-style: normal;
font-size: 12px;
padding: 3px 10px;
border-right: 3px solid #8bcb26;
background: #f5f5f5;
font-weight: 400;
}
.event-detail {
border-left: 2px solid #8bcb26;
padding-left: 30px;
position: relative;
}
.event-detail:before {
width: 14px;
height: 14px;
border-radius: 7px;
background: #fff;
position: absolute;
left: -7px;
top: 10px;
content: "";
}
.event-detail:after {
content: "\f105";
font-family: "FontAwesome";
position: absolute;
left: -2px;
top: 3px;
color: #8bcb26;
font-size: 28px;
}
.event-detail h3 {
margin-bottom: 20px;
}
.event-detail h3 a {
color: #555;
}
.event-detail .img-fluid {
border-radius: 5px;
}
.event-detail h4 {
margin-bottom: 0px;
font-weight: 600;
font-size: 14px;
color: #666;
}
