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" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
<div class="col-sm-6">
<div class="box-info full">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#comments" data-toggle="tab"><i class="fa fa-comments"></i> New Comments</a></li>
<li><a href="#popular" data-toggle="tab"><i class="fa fa-star"></i> Popular Posts</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active animated fadeInRight" id="comments">
<div class="slimScrollDiv" style={{/*position: relative; overflow: hidden; width: auto; height: 325px;*/}}><div class="scroll-widget">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#fakelink">
<img class="media-object" src="https://bootdey.com/img/Content/User_for_snippets.png" alt="Avatar"/>
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">John Doe</a> <small>Just now</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#fakelink">
<img class="media-object" src="https://bootdey.com/img/Content/user-453533-fdadfd.png" alt="Avatar"/>
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">Agent 007</a> <small>Yesterday at 04:00 AM</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#fakelink">
<img class="media-object" src="https://bootdey.com/img/Content/Twitter_bird_icon.png" alt="Avatar"/>
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">Twitter man</a> <small>January 17, 2014 05:35 PM</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style={{/*width: 3px; position: absolute; top: 11px; opacity: 0.4; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; left: 1px; height: 209.5734126984127px; background: rgb(134, 134, 134);*/}}></div><div class="slimScrollRail" style={{/*width: 3px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.3; z-index: 90; left: 1px; background: rgb(51, 51, 51);*/}}></div></div>
<div class="box-footer">
<p><a href="#fakelink"><i class="fa fa-share"></i> See all comments</a></p>
</div>
</div>
<div class="tab-pane animated fadeInRight" id="popular">
<div class="slimScrollDiv" style={{/*position: relative; overflow: hidden; width: auto; height: 325px;*/}}><div class="scroll-widget" style={{/*overflow: hidden; width: auto; height: 325px;*/}}>
<ul class="media-list">
<li class="media">
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">Cras sit amet erat sit amet lacus egestas</a>
<br/><small>January 17, 2014 at 11:24 PM</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</li>
<li class="media">
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">Cras sit amet erat sit amet lacus egestas</a>
<br/><small>January 17, 2014 at 08:24 AM</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</li>
<li class="media">
<div class="media-body">
<h4 class="media-heading"><a href="#fakelink">Cras sit amet erat sit amet lacus egestas</a>
<br/><small>January 17, 2014 at 05:24 AM</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</li>
</ul>
</div><div class="slimScrollBar" style={{/*width: 3px; position: absolute; top: 0px; opacity: 0.4; display: block; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; z-index: 99; left: 1px; background: rgb(134, 134, 134);*/}}></div><div class="slimScrollRail" style={{/*width: 3px; height: 100%; position: absolute; top: 0px; display: none; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; opacity: 0.3; z-index: 90; left: 1px; background: rgb(51, 51, 51);*/}}></div></div>
<div class="box-footer">
<p><a href="#fakelink"><i class="fa fa-share"></i> See all posts</a></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:#EEEEEE;
}
.box-info.full {
padding: 0px;
}
.box-info:hover {
color: #393E48;
}
.box-info {
position: relative;
padding: 15px;
background: #fff;
color: #5b5b5b;
margin-bottom: 20px;
-webkit-transition: All 0.4s ease;
-moz-transition: All 0.4s ease;
-o-transition: All 0.4s ease;
background:#FFFFFF;
margin-top:20px;
}
.box-info .nav-tabs {
background: #1B1E24;
}
.box-info .nav-tabs li.active a, .box-info .nav-tabs li.active a:hover, .box-info .nav-tabs li.active a:focus {
cursor: default;
border-top: none;
border-right: none;
border-left: none;
border-bottom: none;
background-color: #ffffff;
color: #1B1E24;
}
.box-info .nav-tabs li.active a i, .box-info .nav-tabs li.active a:hover i, .box-info .nav-tabs li.active a:focus i {
color: #212121;
}
.box-info .nav-tabs li a i {
color: #fff;
}
.box-info.full .box-footer {
padding: 20px 20px 15px 20px;
}
.box-info .media-list {
margin-top: 30px;
}
.box-info .media-list .media {
padding: 5px 20px;
border-bottom: 1px solid #eaeaea;
}
.box-info .media-list .media .media-object {
width: 50px;
}
.scroll-widget{
overflow: hidden;
width: auto;
height: 325px;
}
