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.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="create-post">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-7 col-sm-7">
<div class="form-group">
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-thumbnail profile-photo-md" />
<textarea name="texts" id="exampleTextarea" cols="30" rows="1" class="form-control" placeholder="Write what you wish"></textarea>
</div>
</div>
<div class="col-md-5 col-sm-5">
<div class="tools">
<ul class="publishing-tools list-inline">
<li><a href="#/"><i class="fa fa-pencil-square-o"></i></a></li>
<li><a href="#/"><i class="fa fa-file-image-o"></i></a></li>
<li><a href="#/"><i class="fa fa-video-camera"></i></a></li>
<li><a href="#/"><i class="fa fa-map"></i></a></li>
</ul>
<button class="btn btn-primary pull-right">Publish</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="friend-list">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/6495ED" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/008B8B" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/9932CC" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/228B22" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/20B2AA" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="friend-card">
<img src="https://www.bootdey.com/image/400x100/FF4500" alt="profile-cover" class="img-responsive cover"/>
<div class="card-info">
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="user" class="profile-photo-lg"/>
<div class="friend-info">
<a href="#/" class="pull-right text-green">My Friend</a>
<h5><a href="timeline.html" class="profile-link">Sophia Lee</a></h5>
<p>Student at Harvard</p>
</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:#FAFAFA
}
img.profile-photo-md {
height: 50px;
width: 50px;
border-radius: 50%;
}
/*==================================================
Create Post Box CSS
==================================================*/
.create-post{
width: 100%;
min-height: 90px;
padding: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #f1f2f2;
}
.create-post .form-group{
margin-bottom: 0;
display: inline-flex;
}
.create-post .form-group .form-control{
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.create-post .form-group img.profile-photo-md{
margin-right: 10px;
}
.create-post .tools{
padding: 8px 0 10px;
}
.create-post .tools ul.publishing-tools{
display: inline-block;
text-align:left;
margin: 0;
padding:5px 0;
}
.create-post .tools ul.publishing-tools li a{
color: #6d6e71;
font-size: 18px;
}
.create-post .tools ul.publishing-tools li a:hover{
color: #27aae1;
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
/*==================================================
Friend List CSS = Newsfeed and Timeline
==================================================*/
.friend-list .friend-card{
border-radius: 4px;
border-bottom: 1px solid #f1f2f2;
overflow: hidden;
margin-bottom: 20px;
}
.friend-list .friend-card .card-info{
padding: 0 20px 10px;
}
.friend-list .friend-card .card-info img.profile-photo-lg{
margin-top: -60px;
border: 7px solid #fff;
}
img.profile-photo-lg {
height: 80px;
width: 80px;
border-radius: 50%;
}
.text-green {
color: #8dc63f;
}
