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://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xl-5">
<div class="card">
<div class="card-body">
<div class="dropdown d-inline-block float-right"><a class="nav-link dropdown-toggle arrow-none" id="dLabel5" data-toggle="dropdown" href="#/" role="button" aria-haspopup="false" aria-expanded="false"><i class="fas fa-ellipsis-v font-20 text-muted"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel5"><a class="dropdown-item" href="#/">New Messages</a> <a class="dropdown-item" href="#/">Open Messages</a></div>
</div>
<h5 class="header-title pb-3 mt-0">New Clients</h5>
<div class="table-responsive boxscroll" style={{/*overflow: hidden; outline: none;*/}} tabindex="5000">
<table class="table mb-0">
<tbody>
<tr>
<td class="border-top-0">
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Roy Saunders <span class="badge badge-soft-danger">USA</span></p><span class="font-12 text-muted">CEO of facebook</span></div>
</div>
</td>
<td class="border-top-0 text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td>
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Tiger Nixon <span class="badge badge-soft-info">UK</span></p><span class="font-12 text-muted">CEO of WhatsApp</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td>
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Ashton Cox <span class="badge badge-soft-pink">USA</span></p><span class="font-12 text-muted">founder of Google</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td>
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Cedric Kelly <span class="badge badge-soft-purple">Canada</span></p><span class="font-12 text-muted">CEO of Paypal</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td class="">
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Garry Pearson <span class="badge badge-soft-info">India</span></p><span class="font-12 text-muted">CEO of facebook</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td>
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Ashton Cox <span class="badge badge-soft-pink">Africa</span></p><span class="font-12 text-muted">founder of Google</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
<tr>
<td>
<div class="media"><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="thumb-md rounded-circle"/>
<div class="media-body ml-2">
<p class="mb-0">Roy Saunders <span class="badge badge-soft-success">USA</span></p><span class="font-12 text-muted">Manager of Bank</span></div>
</div>
</td>
<td class="text-right"><a href="#/" class="btn btn-light btn-sm"><i class="far fa-comments mr-2 text-success"></i>Chat</a></td>
</tr>
</tbody>
</table>
</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: #f5f5f5;
margin-top:20px;
}
.thumb-md {
height: 48px;
width: 48px;
}
.font-12 {
font-size: 12px;
}
.text-muted {
color: #8c9ea9!important;
}
p {
font-size: 13px;
}
.badge-soft-danger {
background-color: rgba(249,110,91,.2);
color: #f96e5b;
}
.badge {
font-weight: 500;
}
.badge-soft-info {
background-color: rgba(51,205,255,.2);
color: #33cdff;
}
.badge-soft-purple {
background-color: rgba(119,95,213,.2);
color: #775fd5;
}
.badge-soft-pink {
background-color: rgba(245,70,142,.2);
color: #f5468e;
}
.badge-soft-success {
background-color: rgba(93,208,153,.2);
color: #5dd099;
}
.table tr td {
color: #8887a9;
}
.card {
border: none;
-webkit-box-shadow: 1px 0 20px rgba(96,93,175,.05);
box-shadow: 1px 0 20px rgba(96,93,175,.05);
margin-bottom: 30px;
}
