Hello guys how are you? Welcome to my blog therichpost.com. Guys today in this post I am going to share Admin Dashboard CRM Free Template Bootstrap 5.
For react js new comers, please check the below links:
Guys here is the code snippet and you need to add inside your index.html file and run on server or localhost to test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 CRM Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
body{
background:#f8fafc;
font-family:Segoe UI,sans-serif;
}
/* Main Area */
.main-wrapper{
padding-top:100px;
min-height:calc(100vh - 140px);
}
/* Cards */
.crm-card{
border:none;
border-radius:18px;
box-shadow:0 4px 15px rgba(0,0,0,.06);
transition:.3s;
}
.crm-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.stats-number{
font-size:34px;
font-weight:700;
color:#4f46e5;
}
/* Badges */
.badge-soft-success{
background:#ecfdf5;
color:#166534;
padding:8px 14px;
border-radius:20px;
}
.badge-soft-warning{
background:#fffbeb;
color:#92400e;
padding:8px 14px;
border-radius:20px;
}
/* Sidebar */
.offcanvas{
width:280px !important;
}
.sidebar-link{
display:flex;
align-items:center;
gap:12px;
padding:13px 16px;
border-radius:14px;
color:#495057;
text-decoration:none;
margin-bottom:6px;
transition:.3s;
}
.sidebar-link:hover{
background:#f1f5f9;
color:#4f46e5;
}
.sidebar-link.active{
background:#4f46e5;
color:#fff;
}
/* Footer */
.footer{
background:#fff;
border-top:1px solid #e9ecef;
padding:20px;
text-align:center;
margin-top:50px;
color:#64748b;
}
/* Table */
.table{
margin-bottom:0;
}
.table th{
font-weight:600;
color:#64748b;
}
.table td{
padding:18px 10px;
}
/* Header */
.header-navbar{
height:70px;
background:#fff;
border-bottom:1px solid #edf2f7;
box-shadow:0 2px 15px rgba(0,0,0,.05);
position:fixed;
top:0;
left:0;
right:0;
z-index:1050;
}
.header-navbar .btn-light{
width:42px;
height:42px;
border-radius:50%;
background:#f8fafc;
border:none;
display:flex;
align-items:center;
justify-content:center;
}
.header-navbar .btn-light:hover{
background:#eef2ff;
}
.navbar-brand{
color:#4f46e5;
font-size:22px;
font-weight:700;
}
.user-avatar{
width:40px;
height:40px;
border-radius:50%;
}
.mobile-hide{
display:flex;
}
/* Mobile */
@media (max-width:991.98px){
.header-navbar{
height:60px;
}
.main-wrapper{
padding-top:80px;
}
.navbar-brand{
font-size:18px;
}
.mobile-hide{
display:none !important;
}
.header-navbar .btn-light{
width:36px;
height:36px;
margin-right:.5rem !important;
}
.header-navbar .container{
padding-left:12px;
padding-right:12px;
}
.user-avatar{
width:36px;
height:36px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg header-navbar">
<div class="container">
<!-- Sidebar Toggle -->
<button
class="btn btn-light border-0 shadow-none me-2"
data-bs-toggle="offcanvas"
data-bs-target="#crmSidebar">
<i class="bi bi-list fs-4"></i>
</button>
<!-- Logo -->
<a class="navbar-brand" href="#">
Bootstrap CRM
</a>
<!-- Right Side -->
<div class="d-flex align-items-center ms-auto">
<!-- Search -->
<button class="btn btn-light me-2 mobile-hide">
<i class="bi bi-search"></i>
</button>
<!-- Notification -->
<button class="btn btn-light me-2 position-relative">
<i class="bi bi-bell"></i>
<span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
3
</span>
</button>
<!-- Dark Mode -->
<button class="btn btn-light me-2 mobile-hide">
<i class="bi bi-moon"></i>
</button>
<!-- User -->
<div class="dropdown">
<a href="#"
class="d-flex align-items-center text-decoration-none dropdown-toggle"
data-bs-toggle="dropdown">
<img
src="https://ui-avatars.com/api/?name=Ajay+Kumar"
class="user-avatar"
alt="User">
<span class="ms-2 fw-semibold text-dark d-none d-lg-inline">
Ajay Kumar
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end shadow border-0">
<li>
<a class="dropdown-item" href="#">
<i class="bi bi-person me-2"></i>
Profile
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="bi bi-gear me-2"></i>
Settings
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item text-danger" href="#">
<i class="bi bi-box-arrow-right me-2"></i>
Logout
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Sidebar -->
<div class="offcanvas offcanvas-start"
tabindex="-1"
id="crmSidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title fw-bold">
CRM Menu
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas">
</button>
</div>
<div class="offcanvas-body">
<a href="#" class="sidebar-link active">
<i class="bi bi-speedometer2"></i>
Dashboard
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-person-plus"></i>
Leads
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-people"></i>
Contacts
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-briefcase"></i>
Deals
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-currency-dollar"></i>
Revenue
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-graph-up"></i>
Reports
</a>
<a href="#" class="sidebar-link">
<i class="bi bi-gear"></i>
Settings
</a>
</div>
</div>
<!-- Main Content -->
<div class="main-wrapper">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="fw-bold">
Dashboard Overview
</h2>
<button class="btn btn-primary rounded-pill">
Create Lead
</button>
</div>
<!-- Stats -->
<div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card crm-card">
<div class="card-body text-center">
<i class="bi bi-person-plus fs-1 text-primary"></i>
<h6 class="mt-3">Leads</h6>
<div class="stats-number">125</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card crm-card">
<div class="card-body text-center">
<i class="bi bi-people fs-1 text-success"></i>
<h6 class="mt-3">Contacts</h6>
<div class="stats-number">584</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card crm-card">
<div class="card-body text-center">
<i class="bi bi-briefcase fs-1 text-warning"></i>
<h6 class="mt-3">Deals</h6>
<div class="stats-number">42</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card crm-card">
<div class="card-body text-center">
<i class="bi bi-currency-dollar fs-1 text-danger"></i>
<h6 class="mt-3">Revenue</h6>
<div class="stats-number">$95K</div>
</div>
</div>
</div>
</div>
<!-- Activities -->
<div class="card crm-card mt-4">
<div class="card-header bg-white py-3">
<h5 class="mb-0">
Recent Activities
</h5>
</div>
<div class="card-body">
<table class="table align-middle">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>
<span class="badge badge-soft-success">
Completed
</span>
</td>
</tr>
<tr>
<td>Mary Jane</td>
<td>
<span class="badge badge-soft-warning">
Pending
</span>
</td>
</tr>
<tr>
<td>David Brown</td>
<td>
<span class="badge badge-soft-success">
Completed
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
© 2026 Modern CRM Dashboard • Bootstrap 5.3
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>This is it guys and after this I will come with more advance view.
Guys if you will have any kind of query then feel free to contact me.
Ajay Kumar
Thank you
Leave a Reply