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" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css" integrity="sha512-pVCM5+SN2+qwj36KonHToF2p1oIvoU3bsqxphdOIWMYmgr4ZqD3t5DjKvvetKhXGc/ZG5REYTT6ltKfExEei/Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.css" integrity="sha256-NAxhqDvtY0l4xn+YVa6WjAcmd94NNfttjNsDmNatFVc=" crossorigin="anonymous" />
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="mb-3">
<h5 class="card-title">Contact List <span class="text-muted fw-normal ms-2">(834)</span></h5>
</div>
</div>
<div class="col-md-6">
<div class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
<div>
<ul class="nav nav-pills">
<li class="nav-item">
<a
aria-current="page"
href="#/"
class="router-link-active router-link-exact-active nav-link active"
data-bs-toggle="tooltip"
data-bs-placement="top"
title=""
data-bs-original-title="List"
aria-label="List"
>
<i class="bx bx-list-ul"></i>
</a>
</li>
<li class="nav-item">
<a href="#/" class="nav-link" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Grid" aria-label="Grid"><i class="bx bx-grid-alt"></i></a>
</li>
</ul>
</div>
<div>
<a href="#/" data-bs-toggle="modal" data-bs-target=".add-new" class="btn btn-primary"><i class="bx bx-plus me-1"></i> Add New</a>
</div>
<div class="dropdown">
<a class="btn btn-link text-muted py-1 font-size-16 shadow-none dropdown-toggle" href="#/" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bx bx-dots-horizontal-rounded"></i></a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#/">Action</a></li>
<li><a class="dropdown-item" href="#/">Another action</a></li>
<li><a class="dropdown-item" href="#/">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="">
<div class="table-responsive">
<table class="table project-list-table table-nowrap align-middle table-borderless">
<thead>
<tr>
<th scope="col" class="ps-4" style={{/*width: 50px;*/}}>
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck" /><label class="form-check-label" for="contacusercheck"></label></div>
</th>
<th scope="col">Name</th>
<th scope="col">Position</th>
<th scope="col">Email</th>
<th scope="col">Projects</th>
<th scope="col" style={{/*width: 200px;*/}}>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck1" /><label class="form-check-label" for="contacusercheck1"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Simon Ryles</a></td>
<td><span class="badge badge-soft-success mb-0">Full Stack Developer</span></td>
<td>[email protected]</td>
<td>125</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck2" /><label class="form-check-label" for="contacusercheck2"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Marion Walker</a></td>
<td><span class="badge badge-soft-info mb-0">Frontend Developer</span></td>
<td>[email protected]</td>
<td>132</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck3" /><label class="form-check-label" for="contacusercheck3"></label></div>
</th>
<td>
<div class="avatar-sm d-inline-block me-2">
<div class="avatar-title bg-soft-primary rounded-circle text-primary"><i class="mdi mdi-account-circle m-0"></i></div>
</div>
<a href="#/" class="text-body">Frederick White</a>
</td>
<td><span class="badge badge-soft-danger mb-0">UI/UX Designer</span></td>
<td>[email protected]</td>
<td>112</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck4" /><label class="form-check-label" for="contacusercheck4"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Shanon Marvin</a></td>
<td><span class="badge badge-soft-primary mb-0">Backend Developer</span></td>
<td>[email protected]</td>
<td>121</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck5" /><label class="form-check-label" for="contacusercheck5"></label></div>
</th>
<td>
<div class="avatar-sm d-inline-block me-2">
<div class="avatar-title bg-soft-primary rounded-circle text-primary"><i class="mdi mdi-account-circle m-0"></i></div>
</div>
<a href="#/" class="text-body">Mark Jones</a>
</td>
<td><span class="badge badge-soft-info mb-0">Frontend Developer</span></td>
<td>[email protected]</td>
<td>145</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#/">Edit</a><a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Remove</a></div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck6" /><label class="form-check-label" for="contacusercheck6"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Janice Morgan</a></td>
<td><span class="badge badge-soft-primary mb-0">Backend Developer</span></td>
<td>[email protected]</td>
<td>136</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck7" /><label class="form-check-label" for="contacusercheck7"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Patrick Petty</a></td>
<td><span class="badge badge-soft-danger mb-0">UI/UX Designer</span></td>
<td>[email protected]</td>
<td>125</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck8" /><label class="form-check-label" for="contacusercheck8"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Marilyn Horton</a></td>
<td><span class="badge badge-soft-primary mb-0">Backend Developer</span></td>
<td>[email protected]</td>
<td>154</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
<tr>
<th scope="row" class="ps-4">
<div class="form-check font-size-16"><input type="checkbox" class="form-check-input" id="contacusercheck9" /><label class="form-check-label" for="contacusercheck9"></label></div>
</th>
<td><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="avatar-sm rounded-circle me-2" /><a href="#/" class="text-body">Neal Womack</a></td>
<td><span class="badge badge-soft-success mb-0">Full Stack Developer</span></td>
<td>[email protected]</td>
<td>231</td>
<td>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
</li>
<li class="list-inline-item">
<a href="#/" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="px-2 text-danger"><i class="bx bx-trash-alt font-size-18"></i></a>
</li>
<li class="list-inline-item dropdown">
<a class="text-muted dropdown-toggle font-size-18 px-2" href="#/" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#/">Action</a><a class="dropdown-item" href="#/">Another action</a><a class="dropdown-item" href="#/">Something else here</a>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row g-0 align-items-center pb-4">
<div class="col-sm-6">
<div><p class="mb-sm-0">Showing 1 to 10 of 57 entries</p></div>
</div>
<div class="col-sm-6">
<div class="float-sm-end">
<ul class="pagination mb-sm-0">
<li class="page-item disabled">
<a href="#/" class="page-link"><i class="mdi mdi-chevron-left"></i></a>
</li>
<li class="page-item active"><a href="#/" class="page-link">1</a></li>
<li class="page-item"><a href="#/" class="page-link">2</a></li>
<li class="page-item"><a href="#/" class="page-link">3</a></li>
<li class="page-item"><a href="#/" class="page-link">4</a></li>
<li class="page-item"><a href="#/" class="page-link">5</a></li>
<li class="page-item">
<a href="#/" class="page-link"><i class="mdi mdi-chevron-right"></i></a>
</li>
</ul>
</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-color:#eee;
}
.project-list-table {
border-collapse: separate;
border-spacing: 0 12px
}
.project-list-table tr {
background-color: #fff
}
.table-nowrap td, .table-nowrap th {
white-space: nowrap;
}
.table-borderless>:not(caption)>*>* {
border-bottom-width: 0;
}
.table>:not(caption)>*>* {
padding: 0.75rem 0.75rem;
background-color: var(--bs-table-bg);
border-bottom-width: 1px;
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.avatar-sm {
height: 2rem;
width: 2rem;
}
.rounded-circle {
border-radius: 50%!important;
}
.me-2 {
margin-right: 0.5rem!important;
}
img, svg {
vertical-align: middle;
}
a {
color: #3b76e1;
text-decoration: none;
}
.badge-soft-danger {
color: #f56e6e !important;
background-color: rgba(245,110,110,.1);
}
.badge-soft-success {
color: #63ad6f !important;
background-color: rgba(99,173,111,.1);
}
.badge-soft-primary {
color: #3b76e1 !important;
background-color: rgba(59,118,225,.1);
}
.badge-soft-info {
color: #57c9eb !important;
background-color: rgba(87,201,235,.1);
}
.avatar-title {
align-items: center;
background-color: #3b76e1;
color: #fff;
display: flex;
font-weight: 500;
height: 100%;
justify-content: center;
width: 100%;
}
.bg-soft-primary {
background-color: rgba(59,118,225,.25)!important;
}
