Hello guys how are you? Welcome back to my blog therichpost.com. Today in this blog post I am going to show you Free Bootstrap 5 Admin Dashboard Template Fully Responsive.
For new comers, please check the below links:
Guys here is the code snippet and please use carefully to avoid mistakes:
1. Guys here is the first bootstrap5.html or index.html file code:
<!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 - 110px);
}
/* 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;
}
}
.modal-content{
border-radius:24px;
}
.modal-header,
.modal-footer{
padding:1rem 1.5rem;
}
.modal-body{
padding:1.5rem;
}
.form-control,
.form-select{
border-radius:12px;
padding:0.75rem 1rem;
}
.form-control:focus,
.form-select:focus{
border-color:#4f46e5;
box-shadow:0 0 0 0.2rem rgba(79,70,229,.15);
}
.modal-xl{
max-width:1100px;
}
</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="settings.html">
<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="bootstrap5.html" 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="contact.html" 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="settings.html" 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 px-4"
data-bs-toggle="modal"
data-bs-target="#createLeadModal">
<i class="bi bi-person-plus me-1"></i>
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>
</div>
<!-- Footer -->
<footer class="footer">
© 2026 Modern CRM Dashboard • Bootstrap 5.3
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
<div class="modal fade" id="createLeadModal" tabindex="-1" aria-labelledby="createLeadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content border-0 shadow-lg rounded-4">
<div class="modal-header bg-white border-bottom">
<h5 class="modal-title fw-bold" id="createLeadModalLabel">
<i class="bi bi-person-plus text-primary me-2"></i>
Create New Lead
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-person me-2"></i>
Lead Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Enter first name">
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Enter last name">
</div>
<div class="col-md-6">
<label class="form-label">Company</label>
<input type="text" class="form-control" placeholder="Company name">
</div>
<div class="col-md-6">
<label class="form-label">Job Title</label>
<input type="text" class="form-control" placeholder="Job title">
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="tel" class="form-control" placeholder="+91 98765 43210">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-briefcase me-2"></i>
Sales Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Lead Source</label>
<select class="form-select">
<option>Website</option>
<option>Referral</option>
<option>Social Media</option>
<option>Email Campaign</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Lead Status</label>
<select class="form-select">
<option>New</option>
<option>Contacted</option>
<option>Qualified</option>
<option>Lost</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Expected Revenue</label>
<input type="number" class="form-control" placeholder="50000">
</div>
<div class="col-md-6">
<label class="form-label">Assigned To</label>
<select class="form-select">
<option>Ajay Kumar</option>
<option>Sales Team</option>
<option>Support Team</option>
</select>
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-calendar-event me-2"></i>
Follow-up Schedule
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Follow-up Date</label>
<input type="date" class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">Follow-up Time</label>
<input type="time" class="form-control">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-chat-left-text me-2"></i>
Notes
</h6>
<div class="mb-3">
<label class="form-label">Additional Notes</label>
<textarea class="form-control" rows="4" placeholder="Write notes here..."></textarea>
</div>
</form>
</div>
<div class="modal-footer bg-white border-top">
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary rounded-pill px-4">
<i class="bi bi-check-circle me-1"></i>
Save Lead
</button>
</div>
</div>
</div>
</div>
</html>2. Guys please add below code inside contact.html file:
<!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 - 110px);
}
/* 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;
}
}
.modal-content{
border-radius:24px;
}
.modal-header,
.modal-footer{
padding:1rem 1.5rem;
}
.modal-body{
padding:1.5rem;
}
.form-control,
.form-select{
border-radius:12px;
padding:0.75rem 1rem;
}
.form-control:focus,
.form-select:focus{
border-color:#4f46e5;
box-shadow:0 0 0 0.2rem rgba(79,70,229,.15);
}
.modal-xl{
max-width:1100px;
}
</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="settings.html">
<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="bootstrap5.html" 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="contact.html" 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="settings.html" class="sidebar-link">
<i class="bi bi-gear"></i>
Settings
</a>
</div>
</div>
<!-- Main Content -->
<div class="main-wrapper">
<div class="container">
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h3 class="fw-bold mb-1">Contacts</h3>
<p class="text-muted mb-0">
Manage all your customer contacts.
</p>
</div>
<button class="btn btn-primary px-4 rounded-pill"
data-bs-toggle="modal"
data-bs-target="#createContactModal">
<i class="bi bi-plus-circle me-2"></i>
Create Contact
</button>
</div>
<!-- Contact Table -->
<div class="card crm-card">
<div class="card-body">
<div class="table-responsive">
<table class="table align-middle table-hover">
<thead class="table-light">
<tr>
<th>Name</th>
<th>Company</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
<th width="170">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/45?img=11"
class="rounded-circle me-3"
width="42">
<div>
<div class="fw-semibold">
John Smith
</div>
<small class="text-muted">
Sales Manager
</small>
</div>
</div>
</td>
<td>ABC Technologies</td>
<td>john@example.com</td>
<td>+1 987654321</td>
<td>
<span class="badge bg-success">
Active
</span>
</td>
<td>
<button class="btn btn-sm btn-light">
<i class="bi bi-eye"></i>
</button>
<button class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/45?img=15"
class="rounded-circle me-3"
width="42">
<div>
<div class="fw-semibold">
Mary Jane
</div>
<small class="text-muted">
Marketing
</small>
</div>
</div>
</td>
<td>Creative Studio</td>
<td>mary@example.com</td>
<td>+1 123456789</td>
<td>
<span class="badge bg-warning text-dark">
Pending
</span>
</td>
<td>
<button class="btn btn-sm btn-light">
<i class="bi bi-eye"></i>
</button>
<button class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/45?img=22"
class="rounded-circle me-3"
width="42">
<div>
<div class="fw-semibold">
David Brown
</div>
<small class="text-muted">
CEO
</small>
</div>
</div>
</td>
<td>Next Solutions</td>
<td>david@example.com</td>
<td>+1 456789123</td>
<td>
<span class="badge bg-success">
Active
</span>
</td>
<td>
<button class="btn btn-sm btn-light">
<i class="bi bi-eye"></i>
</button>
<button class="btn btn-sm btn-warning">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-danger">
<i class="bi bi-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade"
id="createContactModal"
tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content border-0 shadow-lg">
<div class="modal-header">
<h4 class="modal-title fw-bold">
<i class="bi bi-person-plus me-2"></i>
Create Contact
</h4>
<button class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">
First Name
</label>
<input type="text"
class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">
Last Name
</label>
<input type="text"
class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">
Company
</label>
<input type="text"
class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">
Email
</label>
<input type="email"
class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">
Phone
</label>
<input type="text"
class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">
Status
</label>
<select class="form-select">
<option>Active</option>
<option>Pending</option>
<option>Inactive</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light"
data-bs-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary">
<i class="bi bi-check-circle me-2"></i>
Save Contact
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
© 2026 Modern CRM Dashboard • Bootstrap 5.3
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
<div class="modal fade" id="createLeadModal" tabindex="-1" aria-labelledby="createLeadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content border-0 shadow-lg rounded-4">
<div class="modal-header bg-white border-bottom">
<h5 class="modal-title fw-bold" id="createLeadModalLabel">
<i class="bi bi-person-plus text-primary me-2"></i>
Create New Lead
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-person me-2"></i>
Lead Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Enter first name">
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Enter last name">
</div>
<div class="col-md-6">
<label class="form-label">Company</label>
<input type="text" class="form-control" placeholder="Company name">
</div>
<div class="col-md-6">
<label class="form-label">Job Title</label>
<input type="text" class="form-control" placeholder="Job title">
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="tel" class="form-control" placeholder="+91 98765 43210">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-briefcase me-2"></i>
Sales Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Lead Source</label>
<select class="form-select">
<option>Website</option>
<option>Referral</option>
<option>Social Media</option>
<option>Email Campaign</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Lead Status</label>
<select class="form-select">
<option>New</option>
<option>Contacted</option>
<option>Qualified</option>
<option>Lost</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Expected Revenue</label>
<input type="number" class="form-control" placeholder="50000">
</div>
<div class="col-md-6">
<label class="form-label">Assigned To</label>
<select class="form-select">
<option>Ajay Kumar</option>
<option>Sales Team</option>
<option>Support Team</option>
</select>
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-calendar-event me-2"></i>
Follow-up Schedule
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Follow-up Date</label>
<input type="date" class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">Follow-up Time</label>
<input type="time" class="form-control">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-chat-left-text me-2"></i>
Notes
</h6>
<div class="mb-3">
<label class="form-label">Additional Notes</label>
<textarea class="form-control" rows="4" placeholder="Write notes here..."></textarea>
</div>
</form>
</div>
<div class="modal-footer bg-white border-top">
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary rounded-pill px-4">
<i class="bi bi-check-circle me-1"></i>
Save Lead
</button>
</div>
</div>
</div>
</div>
</html>3. Guys we need to add below code inside settings.html file:
<!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 - 110px);
}
/* 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;
}
}
.modal-content{
border-radius:24px;
}
.modal-header,
.modal-footer{
padding:1rem 1.5rem;
}
.modal-body{
padding:1.5rem;
}
.form-control,
.form-select{
border-radius:12px;
padding:0.75rem 1rem;
}
.form-control:focus,
.form-select:focus{
border-color:#4f46e5;
box-shadow:0 0 0 0.2rem rgba(79,70,229,.15);
}
.modal-xl{
max-width:1100px;
}
</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="settings.html">
<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="bootstrap5.html" 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="contact.html" 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="settings.html" class="sidebar-link">
<i class="bi bi-gear"></i>
Settings
</a>
</div>
</div>
<!-- Main Content -->
<div class="main-wrapper">
<div class="container">
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h3 class="fw-bold mb-1">
<i class="bi bi-gear me-2 text-primary"></i>
Settings
</h3>
<p class="text-muted mb-0">
Manage your account preferences.
</p>
</div>
<button class="btn btn-primary px-4">
<i class="bi bi-check-circle me-2"></i>
Save Changes
</button>
</div>
<div class="row g-4">
<!-- Left Menu -->
<div class="col-lg-3">
<div class="card crm-card">
<div class="list-group list-group-flush">
<a href="#profile"
class="list-group-item list-group-item-action active"
data-bs-toggle="tab">
<i class="bi bi-person-circle me-2"></i>
Profile
</a>
<a href="#appearance"
class="list-group-item list-group-item-action"
data-bs-toggle="tab">
<i class="bi bi-palette me-2"></i>
Appearance
</a>
</div>
</div>
</div>
<!-- Right Content -->
<div class="col-lg-9">
<div class="tab-content">
<!-- Profile -->
<div class="tab-pane fade show active" id="profile">
<div class="card crm-card">
<div class="card-header bg-white">
<h5 class="mb-0">
Profile Settings
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" value="Ajay Kumar">
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" value="admin@example.com">
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="text" class="form-control" value="+91 9876543210">
</div>
<div class="col-md-6">
<label class="form-label">Department</label>
<input type="text" class="form-control" value="Sales">
</div>
</div>
</div>
</div>
</div>
<!-- Appearance -->
<div class="tab-pane fade" id="appearance">
<div class="card crm-card">
<div class="card-header bg-white">
<h5 class="mb-0">
Appearance
</h5>
</div>
<div class="card-body">
<div class="mb-4">
<label class="form-label fw-semibold">
Theme
</label>
<select class="form-select">
<option>Light</option>
<option>Dark</option>
<option>System Default</option>
</select>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input"
type="checkbox"
checked>
<label class="form-check-label">
Fixed Header
</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input"
type="checkbox"
checked>
<label class="form-check-label">
Compact Sidebar
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input"
type="checkbox">
<label class="form-check-label">
Enable Animations
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
© 2026 Modern CRM Dashboard • Bootstrap 5.3
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
<div class="modal fade" id="createLeadModal" tabindex="-1" aria-labelledby="createLeadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content border-0 shadow-lg rounded-4">
<div class="modal-header bg-white border-bottom">
<h5 class="modal-title fw-bold" id="createLeadModalLabel">
<i class="bi bi-person-plus text-primary me-2"></i>
Create New Lead
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-person me-2"></i>
Lead Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Enter first name">
</div>
<div class="col-md-6">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Enter last name">
</div>
<div class="col-md-6">
<label class="form-label">Company</label>
<input type="text" class="form-control" placeholder="Company name">
</div>
<div class="col-md-6">
<label class="form-label">Job Title</label>
<input type="text" class="form-control" placeholder="Job title">
</div>
<div class="col-md-6">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="col-md-6">
<label class="form-label">Phone</label>
<input type="tel" class="form-control" placeholder="+91 98765 43210">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-briefcase me-2"></i>
Sales Information
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Lead Source</label>
<select class="form-select">
<option>Website</option>
<option>Referral</option>
<option>Social Media</option>
<option>Email Campaign</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Lead Status</label>
<select class="form-select">
<option>New</option>
<option>Contacted</option>
<option>Qualified</option>
<option>Lost</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label">Expected Revenue</label>
<input type="number" class="form-control" placeholder="50000">
</div>
<div class="col-md-6">
<label class="form-label">Assigned To</label>
<select class="form-select">
<option>Ajay Kumar</option>
<option>Sales Team</option>
<option>Support Team</option>
</select>
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-calendar-event me-2"></i>
Follow-up Schedule
</h6>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label">Follow-up Date</label>
<input type="date" class="form-control">
</div>
<div class="col-md-6">
<label class="form-label">Follow-up Time</label>
<input type="time" class="form-control">
</div>
</div>
<hr class="my-4">
<h6 class="fw-semibold text-primary mb-3">
<i class="bi bi-chat-left-text me-2"></i>
Notes
</h6>
<div class="mb-3">
<label class="form-label">Additional Notes</label>
<textarea class="form-control" rows="4" placeholder="Write notes here..."></textarea>
</div>
</form>
</div>
<div class="modal-footer bg-white border-top">
<button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary rounded-pill px-4">
<i class="bi bi-check-circle me-1"></i>
Save Lead
</button>
</div>
</div>
</div>
</div>
</html>Guys this is it and if you will have any kind of query then feel free to comment on this post.
Ajay
Thank you
Leave a Reply