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="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<a href="#/" class="btn btn-info send-message-btn" role="button"><i class="fa fa-search"></i> Search</a>
<a href="#/" class="btn btn-info send-message-btn" role="button"><i class="fa fa-gears"></i> Settings</a>
</div>
<div class="row">
<div class="conversation-wrap col-md-3">
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
</a>
<div class="media-body">
<h5 class="media-heading">Michael clarkt</h5>
<small class="text-muted">Lorem ipsum dolor...</small>
</div>
</div>
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_1.jpg"/>
</a>
<div class="media-body">
<h5 class="media-heading">Pauline mothg</h5>
<small class="text-muted">Cras commodo...</small>
</div>
</div>
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user_3.jpg"/>
</a>
<div class="media-body">
<h5 class="media-heading">Manuel mcKlein</h5>
<small class="text-muted">Cras sit amet...</small>
</div>
</div>
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/User_for_snippets.png"/>
</a>
<div class="media-body">
<h5 class="media-heading">Markt prame</h5>
<small class="text-muted">Morbi felis...</small>
</div>
</div>
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle"style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/user-453533-fdadfd.png"/>
</a>
<div class="media-body">
<h5 class="media-heading">Bort snudert</h5>
<small class="text-muted">Vivamus semper...</small>
</div>
</div>
<div class="media conversation">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 50px; height: 50px;*/}} src="https://bootdey.com/img/Content/HexGames349.jpg"/>
</a>
<div class="media-body">
<h5 class="media-heading">Maria monthg</h5>
<small class="text-muted">cursus ac...</small>
</div>
</div>
</div>
<div class="message-wrap col-md-8">
<div class="msg-wrap">
<div class="media msg ">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
</a>
<div class="media-body">
<small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
<h5 class="media-heading">Pauline mothg</h5>
<small class="col-md-10 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis, augue sed euismod varius, nisl metus vestibulum neque, nec dictum est dui et tellus</small>
</div>
</div>
<div class="alert alert-info msg-date">
<strong>Today</strong>
</div>
<div class="media msg">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
</a>
<div class="media-body">
<small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
<h5 class="media-heading">Pauline mothg</h5>
<small class="col-md-10 text-muted">Interdum et malesuada fames ac ante ipsum primis in faucibus. In at lacus ac velit vehicula elementum at a lorem. Nullam quis augue sodales, porttitor orci non"</small>
</div>
</div>
<div class="media msg">
<a class="pull-left" href="#/">
<img class="media-object img-circle" data-src="holder.js/64x64" alt="64x64" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
</a>
<div class="media-body">
<small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
<h5 class="media-heading">Pauline mothg</h5>
<small class="col-md-10 text-muted">consectetur dui. Quisque lacinia vitae lectus placerat dictum. Integer tristique sem a risus egestas, ac accumsan ligula volutpat. Donec at convallis elit"</small>
</div>
</div>
<div class="media msg">
<a class="pull-left" href="#/">
<img class="media-object img-circle" style={{/*width: 32px; height: 32px;*/}} src="https://bootdey.com/img/Content/user_2.jpg"/>
</a>
<div class="media-body">
<small class="pull-right time"><i class="fa fa-clock-o"></i> 12:10am</small>
<h5 class="media-heading">Pauline mothg</h5>
<small class="col-md-10 text-muted">Cras commodo ante sit amet nulla porta, sed feugiat lectus accumsan. Maecenas luctus est sed dignissim mattis. Mauris ullamcorper hendrerit est in pharetra text-muted"</small>
</div>
</div>
</div>
<div class="send-wrap ">
<textarea class="form-control send-message" rows="3" placeholder="Write a reply..."></textarea>
</div>
<div class="btn-panel">
<button class="btn btn-success" role="button">
<i class="fa fa-share"></i> Send Message
</button>
</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 :
.conversation-wrap{
box-shadow: -2px 0 3px #ddd;
padding:0;
max-height: 400px;
overflow: auto;
}
.conversation{
padding:5px;
border-bottom:1px solid #ddd;
margin:0;
}
.message-wrap{
box-shadow: 0 0 3px #ddd;
padding:0;
}
.msg{
padding:5px;
margin:0;
}
.msg-wrap{
padding:10px;
max-height: 400px;
overflow: auto;
}
.time{
color:#bfbfbf;
}
.send-wrap{
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding:10px;
}
.send-message{
resize: none;
}
.highlight{
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
.send-message-btn{
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.msg-wrap .media-heading{
color:#003bb3;
font-weight: 700;
}
.msg-date{
background: none;
text-align: center;
color:#aaa;
border:none;
box-shadow: none;
border-bottom: 1px solid #ddd;
}
