Bootstrap Project — Build a Complete Responsive Dashboard
In this tutorial, you will learn about Bootstrap Project. We cover key concepts, practical examples, and best practices to help you master this topic.
This Bootstrap project guides you through building a complete responsive admin dashboard using Bootstrap 5 components, grid system, and JavaScript components.
What You'll Learn
You will build a real admin dashboard with a fixed navbar, collapsible sidebar, card grid for metrics, data table, form modal, and toast notifications — applying all Bootstrap skills from this course.
Why It Matters
Building a complete project consolidates your learning. DodaTech's internal dashboards follow this exact pattern: navbar, sidebar, content cards, tables, and modals.
Real-World Use
Durga Antivirus Pro's admin panel mirrors this dashboard structure with scan statistics, threat tables, and configuration forms — all built with Bootstrap.
flowchart LR
A[Bootstrap JS] --> B[Bootstrap Project]
B --> C[Setup]
B --> D[Navbar + Sidebar]
B --> E[Dashboard Grid]
B --> F[Data Table]
B --> G[Forms + Modals]
B --> H[Final Polish]
style B fill:#7952b3,stroke:#563d7c,color:#fff
style H fill:#22c55e,stroke:#16a34a,color:#fff
Project Structure
bootstrap-dashboard/
index.html
css/
styles.css
js/
dashboard.js
Step 1: HTML Shell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard — Bootstrap Project</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-dark text-white" id="sidebar">
<div class="sidebar-heading p-3 fs-5 fw-bold">DodaTech Admin</div>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link text-white" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Users</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Settings</a></li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content" class="w-100">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container-fluid">
<button class="btn btn-outline-secondary" id="sidebarToggle">Toggle Sidebar</button>
<span class="navbar-text ms-auto">Welcome, Admin</span>
</div>
</nav>
<div class="container-fluid p-4">
<!-- Dashboard content goes here -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/dashboard.js"></script>
</body>
</html>
Expected output: A dashboard shell with dark sidebar, light navbar, and content area.
Step 2: Dashboard Metric Cards
<div class="row mb-4">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-start border-primary border-3 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<div class="text-muted small">Total Users</div>
<div class="fs-3 fw-bold">12,847</div>
</div>
</div>
<div class="text-success small mt-2">+3.5% from last month</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-start border-success border-3 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<div class="text-muted small">Active Scans</div>
<div class="fs-3 fw-bold">847</div>
</div>
</div>
<div class="text-success small mt-2">+12% from last week</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-start border-warning border-3 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<div class="text-muted small">Threats Blocked</div>
<div class="fs-3 fw-bold">1,234</div>
</div>
</div>
<div class="text-warning small mt-2">-2% from yesterday</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-start border-danger border-3 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<div class="text-muted small">Critical Alerts</div>
<div class="fs-3 fw-bold">7</div>
</div>
</div>
<div class="text-danger small mt-2">Requires attention</div>
</div>
</div>
</div>
</div>
Expected output: Four metric cards in a responsive grid with colored left borders.
Step 3: Data Table
<div class="card shadow-sm mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Recent Activity</h5>
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">Add Entry</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr><th>User</th><th>Action</th><th>Status</th><th>Date</th></tr>
</thead>
<tbody>
<tr><td>john@example.com</td><td>Login</td><td><span class="badge bg-success">Success</span></td><td>2026-06-28</td></tr>
<tr><td>jane@example.com</td><td>File download</td><td><span class="badge bg-warning text-dark">Pending</span></td><td>2026-06-28</td></tr>
<tr><td>admin@dodatech.com</td><td>Settings change</td><td><span class="badge bg-danger">Blocked</span></td><td>2026-06-27</td></tr>
</tbody>
</table>
</div>
</div>
</div>
Expected output: A responsive table with striped rows, hover effect, and status badges.
Step 4: Add Entry Modal
<div class="modal fade" id="addModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Activity Entry</h5>
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="addForm">
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Action</label>
<select class="form-select"><option>Login</option><option>Download</option><option>Settings</option></select>
</div>
<div class="mb-3">
<label class="form-label">Status</label>
<select class="form-select"><option>Success</option><option>Pending</option><option>Blocked</option></select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button class="btn btn-primary" id="saveEntry">Save</button>
</div>
</div>
</div>
</div>
Expected output: A modal with a form for adding new entries.
Step 5: Toast Notifications
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="successToast" class="toast" role="alert">
<div class="toast-header">
<strong class="me-auto">Success</strong>
<button class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Entry added successfully.</div>
</div>
<div id="errorToast" class="toast" role="alert">
<div class="toast-header bg-danger text-white">
<strong class="me-auto">Error</strong>
<button class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">Failed to add entry.</div>
</div>
</div>
Expected output: Toast notifications stacked in the bottom-right corner.
Step 6: JavaScript (dashboard.js)
document.addEventListener('DOMContentLoaded', function() {
// Sidebar toggle
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('d-none');
});
// Save entry
document.getElementById('saveEntry').addEventListener('click', function() {
var form = document.getElementById('addForm');
if (form.checkValidity()) {
var modal = bootstrap.Modal.getInstance(document.getElementById('addModal'));
modal.hide();
form.reset();
var toast = new bootstrap.Toast(document.getElementById('successToast'));
toast.show();
} else {
form.classList.add('was-validated');
}
});
// Reset form validation on modal close
document.getElementById('addModal').addEventListener('hidden.bs.modal', function() {
document.getElementById('addForm').classList.remove('was-validated');
});
});
Expected output: A functional dashboard with sidebar toggle, form validation, modal management, and toast notifications.
Common Mistakes
1. Not Including Bootstrap JS Bundle
Without bootstrap.bundle.min.js, modals, toasts, and sidebar toggle will not work.
2. Missing Container for Sidebar Layout
The flex layout (d-flex on the wrapper) is essential for the sidebar + content layout. Without it, the sidebar takes full width.
3. Not Testing Responsive Breakpoints
The dashboard must work at all screen sizes. Test each breakpoint and adjust column classes as needed.
4. Overlooking the Sidebar Toggle on Mobile
The sidebar should be hidden by default on mobile and togglable. Use responsive classes like d-none d-lg-block.
5. Not Adding Form Validation
Forms should have proper validation feedback using Bootstrap's validation classes.
Practice Questions
What flex class creates the sidebar + content layout?
d-flexon the wrapper div with the sidebar and content as flex children.How do you toggle sidebar visibility? Add/remove the
d-noneclass on the sidebar element using JavaScript.What Bootstrap components are used for the metric cards? Cards with
border-startandborder-3for the colored left border accent.How do you show a toast after a successful form submission? Create a new
bootstrap.Toast(toastElement)and call.show().What event should you listen to for resetting the form when a modal closes?
hidden.bs.modalevent fires after the modal is fully hidden.
Challenge
Extend the dashboard with a third-party chart library (like Chart.js) to display a line chart of scan activity and a pie chart of threat types. Add a dark mode toggle using CSS custom properties.
FAQ
What's Next
Congratulations on completing Bootstrap! Continue your learning journey with Sass for CSS preprocessing, or explore Tailwind CSS for a utility-first approach to styling.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro