In this practical project, we will create a responsive admin dashboard using Bootstrap. You will learn how to combine Bootstrap containers, grid system, cards, buttons, tables, badges, progress bars, Flexbox, spacing utilities, and responsive navigation to build a useful dashboard layout.
Our dashboard will contain several important sections.
We will create the dashboard using Bootstrap classes instead of writing custom CSS.
Start with a basic HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Dashboard
</title>
</head>
<body>
Dashboard Content
</body>
</html>
Include Bootstrap CSS in the head section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
This gives the dashboard access to Bootstrap's grid, cards, tables, buttons, badges, progress bars, and utility classes.
Use a responsive Bootstrap container.
<div class="container-fluid py-4">
Dashboard Content
</div>
We use container-fluid because dashboards commonly need
more horizontal space.
Create a heading and a short description.
<div
class="d-flex
flex-column
flex-md-row
justify-content-between
align-items-md-center
gap-3
mb-4">
<div>
<h1 class="mb-1">
Dashboard
</h1>
<p class="text-body-secondary mb-0">
Welcome to your admin dashboard.
</p>
</div>
<button class="btn btn-primary">
Add New
</button>
</div>
The Flexbox classes make the header responsive.
Create a row for dashboard statistics.
<div class="row g-4">
Statistics Cards
</div>
The g-4 utility provides spacing between the cards.
Use a responsive column and Bootstrap card.
<div
class="col-12
col-sm-6
col-xl-3">
<div class="card h-100">
<div class="card-body">
<p class="text-body-secondary mb-1">
Total Users
</p>
<h2>
2,450
</h2>
<span class="badge text-bg-success">
+12%
</span>
</div>
</div>
</div>
The col-xl-3 class allows four cards to fit in one row
from the extra-large breakpoint.
Create another statistics card for revenue.
<div
class="col-12
col-sm-6
col-xl-3">
<div class="card h-100">
<div class="card-body">
<p class="text-body-secondary mb-1">
Revenue
</p>
<h2>
₹1,25,000
</h2>
<span class="badge text-bg-success">
+8%
</span>
</div>
</div>
</div>
Add a card for total orders.
<div
class="col-12
col-sm-6
col-xl-3">
<div class="card h-100">
<div class="card-body">
<p class="text-body-secondary mb-1">
Total Orders
</p>
<h2>
1,280
</h2>
<span class="badge text-bg-info">
+5%
</span>
</div>
</div>
</div>
Create another card to display pending orders or tasks.
<div
class="col-12
col-sm-6
col-xl-3">
<div class="card h-100">
<div class="card-body">
<p class="text-body-secondary mb-1">
Pending
</p>
<h2>
35
</h2>
<span class="badge text-bg-warning">
Attention
</span>
</div>
</div>
</div>
Our four statistics cards use:
col-12 col-sm-6 col-xl-3
This produces:
The Bootstrap grid contains 12 columns, so:
3 + 3 + 3 + 3 = 12
After the statistics cards, create another row.
<div class="row g-4 mt-1">
Main Dashboard Content
</div>
This row can contain charts, progress information, tables, or other dashboard components.
Create a larger card using col-12 col-xl-8.
<div class="col-12 col-xl-8">
<div class="card h-100">
<div class="card-header">
Revenue Summary
</div>
<div class="card-body">
Dashboard information
</div>
</div>
</div>
The card takes 8 of the 12 grid columns on extra-large screens.
Bootstrap progress bars are useful for displaying completion levels.
<div class="mb-3">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Course Sales
</span>
<span>
75%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Course sales"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar"
style="width:75%;">
75%
</div>
</div>
</div>
Add multiple progress bars for different dashboard goals.
<h5 class="mb-3">
Monthly Goals
</h5>
<div class="mb-3">
<div
class="d-flex
justify-content-between">
<span>
New Students
</span>
<span>
80%
</span>
</div>
<div class="progress">
<div
class="progress-bar bg-success"
style="width:80%;">
</div>
</div>
</div>
Use a Bootstrap table to display recent users.
<div class="card">
<div class="card-header">
Recent Users
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table
table-hover">
Table Content
</table>
</div>
</div>
</div>
The table-responsive wrapper allows a wide table to scroll
horizontally when necessary on smaller screens.
Create columns for the user table.
<thead>
<tr>
<th>
Name
</th>
<th>
Email
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
Add sample users to the table.
<tbody>
<tr>
<td>
Rahul Kumar
</td>
<td>
rahul@example.com
</td>
<td>
<span
class="badge text-bg-success">
Active
</span>
</td>
<td>
<button
class="btn btn-sm btn-primary">
View
</button>
</td>
</tr>
</tbody>
Create another table for recent orders.
<div class="card">
<div class="card-header">
Recent Orders
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table
table-striped
align-middle">
<thead>
<tr>
<th>
Order ID
</th>
<th>
Customer
</th>
<th>
Amount
</th>
<th>
Status
</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Use badges to visually communicate order status.
<span
class="badge text-bg-success">
Completed
</span>
<span
class="badge text-bg-warning">
Pending
</span>
<span
class="badge text-bg-danger">
Cancelled
</span>
Use text as well as color so that status is not communicated through color alone.
A dashboard can provide buttons for common administrative actions.
<div class="d-grid gap-2">
<button
class="btn btn-primary">
Add Student
</button>
<button
class="btn btn-success">
Add Course
</button>
<button
class="btn btn-secondary">
Generate Report
</button>
</div>
Place the action buttons inside a Bootstrap card.
<div class="card h-100">
<div class="card-header">
Quick Actions
</div>
<div class="card-body">
<div class="d-grid gap-2">
<button
class="btn btn-primary">
Add Student
</button>
<button
class="btn btn-success">
Add Course
</button>
<button
class="btn btn-warning">
View Reports
</button>
</div>
</div>
</div>
Now combine the main dashboard sections.
<div class="row g-4 mt-1">
<div class="col-12 col-xl-8">
Revenue Summary
</div>
<div class="col-12 col-xl-4">
Quick Actions
</div>
<div class="col-12 col-xl-8">
Recent Users
</div>
<div class="col-12 col-xl-4">
Monthly Goals
</div>
</div>
The dashboard uses the 12-column Bootstrap grid to create different content widths.
The dashboard should work on phones, tablets, laptops, and large screens.
Useful responsive classes include:
col-12 for full-width mobile content.col-sm-6 for two-column layouts from the small
breakpoint.col-md-6 for medium-screen layouts.col-lg-4 for larger layouts.col-xl-3 for four-column statistic cards.d-flex for responsive Flexbox layouts.table-responsive for wide tables.A simple footer can be added below the dashboard content.
<div
class="border-top
mt-5
pt-4
text-center
text-body-secondary">
<p>
© 2026 Admin Dashboard
</p>
</div>
Bootstrap border and spacing utilities allow this section to be created without custom CSS.
A dashboard can include a simple responsive Bootstrap navbar.
<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark
mb-4">
<div class="container-fluid">
<a
class="navbar-brand"
href="#">
Admin Panel
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#dashboardNav"
aria-controls="dashboardNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse
navbar-collapse"
id="dashboardNav">
<ul
class="navbar-nav
ms-auto">
<li class="nav-item">
<a
class="nav-link active"
href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Users
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Reports
</a>
</li>
</ul>
</div>
</div>
</nav>
A professional dashboard can follow this general structure:
Navbar
↓
Dashboard Header
↓
Statistics Cards
↓
Main Dashboard Cards
↓
Recent Users
↓
Recent Orders
↓
Quick Actions
↓
Footer
Keeping dashboard sections organized makes the interface easier to maintain and understand.
The main structure of the project can be represented as follows:
<nav>
Dashboard Navigation
</nav>
<main class="container-fluid py-4">
Dashboard Header
<div class="row g-4">
Statistics Cards
</div>
<div class="row g-4 mt-1">
Revenue Card
Quick Actions
Recent Users
Monthly Goals
Recent Orders
</div>
</main>
Here is the complete responsive Bootstrap dashboard project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Admin Dashboard
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<nav
class="navbar
navbar-expand-lg
navbar-dark
bg-dark">
<div class="container-fluid">
<a
class="navbar-brand fw-bold"
href="#">
Admin Panel
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#dashboardNav"
aria-controls="dashboardNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse
navbar-collapse"
id="dashboardNav">
<ul
class="navbar-nav
ms-auto">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Users
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Reports
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
<main
class="container-fluid
py-4">
<div
class="d-flex
flex-column
flex-md-row
justify-content-between
align-items-md-center
gap-3
mb-4">
<div>
<h1 class="mb-1">
Dashboard
</h1>
<p
class="text-body-secondary
mb-0">
Welcome to your
admin dashboard.
</p>
</div>
<button
class="btn btn-primary">
Add New
</button>
</div>
<!-- Statistics -->
<div class="row g-4">
<div
class="col-12
col-sm-6
col-xl-3">
<div
class="card
h-100
shadow-sm">
<div class="card-body">
<p
class="text-body-secondary
mb-1">
Total Users
</p>
<h2>
2,450
</h2>
<span
class="badge
text-bg-success">
+12%
</span>
</div>
</div>
</div>
<div
class="col-12
col-sm-6
col-xl-3">
<div
class="card
h-100
shadow-sm">
<div class="card-body">
<p
class="text-body-secondary
mb-1">
Revenue
</p>
<h2>
₹1,25,000
</h2>
<span
class="badge
text-bg-success">
+8%
</span>
</div>
</div>
</div>
<div
class="col-12
col-sm-6
col-xl-3">
<div
class="card
h-100
shadow-sm">
<div class="card-body">
<p
class="text-body-secondary
mb-1">
Total Orders
</p>
<h2>
1,280
</h2>
<span
class="badge
text-bg-info">
+5%
</span>
</div>
</div>
</div>
<div
class="col-12
col-sm-6
col-xl-3">
<div
class="card
h-100
shadow-sm">
<div class="card-body">
<p
class="text-body-secondary
mb-1">
Pending
</p>
<h2>
35
</h2>
<span
class="badge
text-bg-warning">
Attention
</span>
</div>
</div>
</div>
</div>
<!-- Main Dashboard -->
<div
class="row
g-4
mt-1">
<!-- Revenue -->
<div
class="col-12
col-xl-8">
<div
class="card
h-100
shadow-sm">
<div
class="card-header
d-flex
justify-content-between
align-items-center">
<h5
class="mb-0">
Revenue Summary
</h5>
<span
class="badge
text-bg-primary">
This Month
</span>
</div>
<div class="card-body">
<h2>
₹1,25,000
</h2>
<p
class="text-body-secondary">
Monthly revenue
</p>
<div class="mb-3">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Target
</span>
<span>
75%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Revenue target"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-success"
style="width:75%;">
75%
</div>
</div>
</div>
<div class="mb-3">
<div
class="d-flex
justify-content-between
mb-1">
<span>
New Students
</span>
<span>
60%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="New students"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-info"
style="width:60%;">
60%
</div>
</div>
</div>
<div>
<div
class="d-flex
justify-content-between
mb-1">
<span>
Course Completion
</span>
<span>
85%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Course completion"
aria-valuenow="85"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar"
style="width:85%;">
85%
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div
class="col-12
col-xl-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-header">
Quick Actions
</div>
<div
class="card-body">
<div
class="d-grid
gap-2">
<button
class="btn
btn-primary">
Add Student
</button>
<button
class="btn
btn-success">
Add Course
</button>
<button
class="btn
btn-warning">
View Reports
</button>
<button
class="btn
btn-secondary">
Settings
</button>
</div>
</div>
</div>
</div>
<!-- Recent Users -->
<div
class="col-12
col-xl-8">
<div
class="card
shadow-sm">
<div
class="card-header
d-flex
justify-content-between
align-items-center">
<h5
class="mb-0">
Recent Users
</h5>
<a
href="#"
class="btn
btn-sm
btn-outline-primary">
View All
</a>
</div>
<div class="card-body">
<div
class="table-responsive">
<table
class="table
table-hover
align-middle">
<thead>
<tr>
<th>
Name
</th>
<th>
Email
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rahul Kumar
</td>
<td>
rahul@example.com
</td>
<td>
<span
class="badge
text-bg-success">
Active
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-primary">
View
</button>
</td>
</tr>
<tr>
<td>
Priya Singh
</td>
<td>
priya@example.com
</td>
<td>
<span
class="badge
text-bg-success">
Active
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-primary">
View
</button>
</td>
</tr>
<tr>
<td>
Amit Kumar
</td>
<td>
amit@example.com
</td>
<td>
<span
class="badge
text-bg-warning">
Pending
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-primary">
View
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Monthly Goals -->
<div
class="col-12
col-xl-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-header">
Monthly Goals
</div>
<div
class="card-body">
<div class="mb-4">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Students
</span>
<span>
80%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Students goal"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-success"
style="width:80%;">
</div>
</div>
</div>
<div class="mb-4">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Courses
</span>
<span>
65%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Courses goal"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-info"
style="width:65%;">
</div>
</div>
</div>
<div>
<div
class="d-flex
justify-content-between
mb-1">
<span>
Revenue
</span>
<span>
90%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Revenue goal"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-warning"
style="width:90%;">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Orders -->
<div class="col-12">
<div
class="card
shadow-sm">
<div
class="card-header
d-flex
justify-content-between
align-items-center">
<h5
class="mb-0">
Recent Orders
</h5>
<a
href="#"
class="btn
btn-sm
btn-outline-primary">
View All
</a>
</div>
<div class="card-body">
<div
class="table-responsive">
<table
class="table
table-striped
align-middle">
<thead>
<tr>
<th>
Order ID
</th>
<th>
Customer
</th>
<th>
Amount
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
#1001
</td>
<td>
Rahul Kumar
</td>
<td>
₹5,000
</td>
<td>
<span
class="badge
text-bg-success">
Completed
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-outline-primary">
View
</button>
</td>
</tr>
<tr>
<td>
#1002
</td>
<td>
Priya Singh
</td>
<td>
₹7,500
</td>
<td>
<span
class="badge
text-bg-warning">
Pending
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-outline-primary">
View
</button>
</td>
</tr>
<tr>
<td>
#1003
</td>
<td>
Amit Kumar
</td>
<td>
₹10,000
</td>
<td>
<span
class="badge
text-bg-danger">
Cancelled
</span>
</td>
<td>
<button
class="btn
btn-sm
btn-outline-primary">
View
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div
class="border-top
mt-5
pt-4
text-center
text-body-secondary">
<p>
© 2026 Admin Dashboard
</p>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
After completing this project, you will have a responsive Bootstrap admin dashboard containing multiple useful components.
container-fluid when dashboard content needs more
horizontal space.
row g-4 to organize dashboard sections with spacing.
col-12 col-sm-6 col-xl-3 for responsive statistic
cards.
card and card-body for dashboard panels.
h-100 when cards should fill the available column
height.
table-responsive to make wide tables usable on
smaller screens.
d-grid gap-2 for vertically stacked dashboard
actions.
Question: Which Bootstrap class is especially useful for making a wide table scroll horizontally on smaller screens?