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 start
2. 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 again
3. 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>
<div class="container bootstrap snippets bootdeys bootdey">
<div class="row decor-default">
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="contacts-labels">
<div class="title">All contacts<span>76</span></div>
<div class="list">
<div class="input-group">
<input type="text" class="contacts-search" placeholder="Search"/>
</div>
<div class="head">Labels</div>
<div class="unit">
<div class="lab lab-success">Work</div><span>7</span>
</div>
<div class="unit">
<div class="lab lab-primary">Family</div><span>8</span>
</div>
<div class="unit">
<div class="lab lab-danger">Private</div><span>13</span>
</div>
<div class="unit">
<div class="lab lab-warning">Friends</div><span>47</span>
</div>
<button type="button" class="btn btn-primary font-weight-700">Add new label</button>
</div>
</div>
</div>
<div class="col-lg-9 col-md-8 col-sm-12">
<div class="contacts-list">
<h5 class="title">Contact List</h5>
<form class="ac-custom ac-checkbox ac-checkmark" autocomplete="off">
<div class="input-group">
<input type="text" class="contacts-list-search" placeholder="Search"/>
</div>
<div class="unit head">
<div class="field name">
<div class="check">
<input id="cb1" name="cb1" type="checkbox"/>
<label for="cb1"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
Name
</div>
<div class="field phone">
Phone
</div>
<div class="field email icons">
Email
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default"><span class="icon icon-folder"></span></button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon icon-label"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#/"><span class="label label-success text-dark">New</span></a></li>
<li><a href="#/"><span class="label label-primary text-dark">Social</span></a></li>
<li><a href="#/"><span class="label label-warning text-dark">Spam</span></a></li>
</ul>
</div>
<button type="button" class="btn btn-default"><span class="icon icon-trash"></span></button>
</div>
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb2" name="cb1" type="checkbox"/>
<label for="cb2"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<div>
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="image" class="avatar"/> Alexander Verdnam
</div>
<div class="lab lab-warning">Friends</div>
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb8" name="cb1" type="checkbox"/>
<label for="cb8"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
<div>
<img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="image" class="avatar"/> Gerard Butler
</div>
<div class="lab lab-success">Work</div>
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb3" name="cb1" type="checkbox"/>
<label for="cb3"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
<div>
<img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="image" class="avatar"/> Anna Lee
</div>
<div class="lab lab-danger">Private</div>
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb4" name="cb1" type="checkbox"/>
<label for="cb4"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
<img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="image" class="avatar"/> Alexandera Verdnam
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb5" name="cb1" type="checkbox"/>
<label for="cb5"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
<div>
<img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="image" class="avatar"/> Olga Verdnam
</div>
<div class="lab lab-primary">Family</div>
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
<div class="unit">
<div class="field name">
<div class="check">
<input id="cb6" name="cb1" type="checkbox"/>
<label for="cb6"></label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></div>
<img src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="image" class="avatar"/> John Verdnam
</div>
<div class="field phone">
+1-800-600-9898
</div>
<div class="field email">
[email protected]
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="http://91.234.35.26/iwiki-admin/v1.0.0/admin/css/vendors/checkboxes.css"/>
<script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/checkboxes.js"></script>
</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:#eee;
}
.decor-default {
background-color: #ffffff;
}
.contacts-labels .title {
font-size: 16px;
line-height: 112px;
background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-42.png") 0 50% no-repeat;
padding: 0 0 0 32px;
color: #333333;
overflow: hidden;
}
.contacts-labels .title span {
float: right;
}
.contacts-labels .settings {
min-width: 70px;
max-width: 70px;
line-height: 38px;
float: left;
margin-right: 10px;
}
.btn-default {
background-color: #ffffff;
border: 1px solid #d8d8d8 !important;
color: #333333;
line-height: 46px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.contacts-search {
width: 100%;
line-height: 38px;
color: #333333;
padding: 0 8px;
border: 1px solid #ccc;
border-right: 0;
}
input {
-webkit-appearance: none;
border-radius: 0;
}
.contacts-search + .input-group-addon {
background: #fff;
border-radius: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.contacts-search + .input-group-addon button {
background: transparent;
}
button {
border: none;
outline: none;
}
.contacts-labels .list .head {
font-size: 20px;
line-height: 32px;
font-weight: bold;
text-align: center;
background: #39bee8;
color: #ffffff;
margin: 60px 0 40px;
}
.contacts-labels .list .unit {
overflow: hidden;
padding: 0 0 20px;
}
.contacts-labels .list .unit .lab-success {
background: #46be8a;
}
.contacts-labels .list .unit .lab-primary {
background: #7266ba;
}
.contacts-labels .list .unit .lab-danger {
background: #ff69b4;
}
.contacts-labels .list .unit .lab-warning {
background: #f2a654;
}
.btn-primary {
background-color: #7266ba;
}
.contacts-labels .list .unit .lab {
font-size: 16px;
line-height: 32px;
float: left;
width: 112px;
padding: 0 0 0 18px;
color: #ffffff;
}
.contacts-labels .list .unit span {
display: block;
float: right;
font-size: 16px;
line-height: 32px;
font-weight: bold;
}
.btn {
min-width: 180px;
font-size: 26px;
line-height: 48px;
font-weight: normal;
color: #ffffff;
padding: 0 24px;
-webkit-transition: background false false, 0.25s false false, cubic-bezier(0.4, 1, 0.3, 1) false false;
-moz-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false;
-o-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false;
transition: background, 0.25s, cubic-bezier(0.4, 1, 0.3, 1);
}
.btn {
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: none;
}
.contacts-list {
border-left: 1px solid #d8d8d8;
margin: -20px 0 40px;
}
.contacts-list .title {
padding: 0 0 0 20px;
color: #7266ba;
line-height: 124px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.contacts-list-search {
width: 100%;
line-height: 60px;
background: #585b9c;
font-size: 24px;
color: #fff;
padding: 0 20px;
}
input {
-webkit-appearance: none;
border-radius: 0;
}
input {
padding: 0;
border: none;
outline: none;
}
.contacts-list-search + .input-group-addon {
background: #585b9c;
border-radius: 0;
border: 0;
}
.input-group-addon:last-child {
border-left: 0;
}
.contacts-list-search + .input-group-addon button {
background: transparent;
}
/************ Contact list*********************/
.contacts-list .unit.head {
font-size: 20px;
color: #7266ba;
padding-bottom: 10px;
overflow: visible;
}
.contacts-list .unit {
padding: 20px 0;
margin-top: -7px;
border-bottom: 1px solid #d8d8d8;
display: inline-block;
width: 100%;
font-size: 16px;
line-height: 40px;
color: #333333;
-webkit-transition: background false false, 0.3s false false;
-moz-transition: background false false false, 0.3s false false false;
-o-transition: background false false false, 0.3s false false false;
transition: background, 0.3s;
}
.contacts-list .unit .field {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.contacts-list .unit .name {
width: 40%;
padding: 0 0 0 80px;
position: relative;
}
.contacts-list .unit .name .check {
position: absolute;
left: 5px;
top: -8px;
}
.contacts-list .unit .phone {
width: 30%;
padding: 0 0 0 20px;
}
.contacts-list .unit .email {
width: 30%;
padding: 0 0 0 20px;
overflow: visible;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.contacts-list .unit .email .btn {
min-width: 38px;
max-width: 38px;
font-size: inherit;
padding: 0 8px;
line-height: 36px;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn, .btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-default {
background-color: #ffffff;
border: 1px solid #d8d8d8 !important;
color: #333333;
line-height: 46px;
}
.contacts-list .icons .icon-folder {
background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-9.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon-label {
background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-5.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon-trash {
background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-10.png") no-repeat 50% 50%;
}
.contacts-list .icons .icon {
display: inline-block;
width: 20px;
height: 20px;
margin-top: 3px;
}
.contacts-list .unit .name .avatar {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 20px;
margin: 0 16px 0 0;
vertical-align: top;
}
.contacts-list .lab {
font-size: 14px;
line-height: 21px;
float: left;
min-width: 75px;
padding: 0 0 0 18px;
color: #ffffff;
margin-left: 60px;
}
.contacts-list .lab-warning {
background: #f2a654;
}
.contacts-list .lab-success {
background: #46be8a;
}
.contacts-list .lab-danger {
background: #ff69b4;
}
.contacts-list .lab-primary {
background: #7266ba;
}