In this practical project, we will create a responsive admin panel using Bootstrap. You will learn how to combine Bootstrap navigation, grid system, cards, tables, badges, buttons, forms, dropdowns, progress bars, spacing utilities, and responsive classes to create a complete admin interface.
An admin panel is an interface used by administrators to manage users, products, orders, reports, settings, and other application data.
Our project will contain:
Start with a standard 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 Admin Panel
</title>
</head>
<body>
Admin Panel Content
</body>
</html>
Add the Bootstrap stylesheet inside the head section.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
Bootstrap provides the layout, cards, navigation, buttons, forms, tables, badges, and responsive utilities required for our admin panel.
Create a dark responsive navigation bar for the admin panel.
<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="#adminNav"
aria-controls="adminNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
</div>
</nav>
Add navigation links for common admin sections.
<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>
<li class="nav-item">
<a
class="nav-link"
href="#">
Settings
</a>
</li>
</ul>
An admin panel can use a sidebar and a main content area.
<div class="container-fluid">
<div class="row">
<aside
class="col-12
col-lg-3
col-xl-2">
Sidebar
</aside>
<main
class="col-12
col-lg-9
col-xl-10">
Main Content
</main>
</div>
</div>
The sidebar and main content become stacked on smaller screens.
Use a Bootstrap list group to create simple sidebar navigation.
<aside
class="p-3
bg-dark
text-white">
<h5 class="mb-3">
Admin Menu
</h5>
<div
class="list-group">
<a
href="#"
class="list-group-item
list-group-item-action
active">
Dashboard
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Users
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Products
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Orders
</a>
</div>
</aside>
A practical admin sidebar can contain several management links.
<a
href="#"
class="list-group-item
list-group-item-action">
Users
</a>
Create the main dashboard heading.
<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 the
admin panel.
</p>
</div>
<button
class="btn btn-primary">
Add New
</button>
</div>
Statistics cards provide a quick overview of important information.
<div class="row g-4">
<div
class="col-12
col-sm-6
col-xl-3">
<div class="card h-100">
<div class="card-body">
<p
class="text-body-secondary">
Total Users
</p>
<h2>
2,450
</h2>
</div>
</div>
</div>
</div>
Create cards for users, orders, revenue, and pending tasks.
Users
2,450
Orders
1,280
Revenue
₹1,25,000
Pending
35
Using the Bootstrap grid makes these statistics responsive.
Badges can communicate compact status information.
<span
class="badge
text-bg-success">
Active
</span>
<span
class="badge
text-bg-warning">
Pending
</span>
<span
class="badge
text-bg-danger">
Cancelled
</span>
Use meaningful text along with color rather than relying on color alone.
A table can display recently registered users.
<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>
</table>
</div>
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>
An orders table can display order ID, customer, amount, and status.
<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>
Quick action buttons provide shortcuts for common administrative operations.
<div
class="d-grid
gap-2">
<button
class="btn
btn-primary">
Add User
</button>
<button
class="btn
btn-success">
Add Product
</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 User
</button>
<button
class="btn
btn-success">
Add Product
</button>
<button
class="btn
btn-warning">
View Reports
</button>
</div>
</div>
</div>
Alerts can be used to display important notifications.
<div
class="alert
alert-info"
role="alert">
You have 5 new
notifications.
</div>
<div
class="alert
alert-warning"
role="alert">
3 orders are waiting
for approval.
</div>
Progress bars can display completion percentages.
<div class="mb-3">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Monthly Sales
</span>
<span>
75%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Monthly sales"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar"
style="width:75%;">
75%
</div>
</div>
</div>
Reports can be represented using cards containing summary information.
<div
class="card
h-100">
<div
class="card-header">
Reports
</div>
<div
class="card-body">
<p>
Monthly revenue has
increased this month.
</p>
<a
href="#"
class="btn
btn-outline-primary">
View Reports
</a>
</div>
</div>
Bootstrap dropdowns can be used for administrator account actions.
<div class="dropdown">
<button
class="btn
btn-secondary
dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Admin
</button>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
Profile
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Settings
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Logout
</a>
</li>
</ul>
</div>
An admin panel commonly needs a search field.
<form
class="d-flex"
role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search">
<button
class="btn
btn-outline-primary"
type="submit">
Search
</button>
</form>
Combine different dashboard sections using the Bootstrap grid.
<div
class="row
g-4
mt-1">
<div
class="col-12
col-xl-8">
Recent Users
</div>
<div
class="col-12
col-xl-4">
Quick Actions
</div>
<div
class="col-12
col-xl-8">
Recent Orders
</div>
<div
class="col-12
col-xl-4">
Reports
</div>
</div>
Use table-responsive around wide tables.
<div
class="table-responsive">
<table
class="table
table-hover">
Table Content
</table>
</div>
On smaller screens, the wrapper allows the table to scroll horizontally instead of forcing the entire page layout to become too wide.
Add a simple footer below the main dashboard content.
<footer
class="border-top
mt-5
pt-4
text-center
text-body-secondary">
<p>
© 2026 Admin Panel.
All rights reserved.
</p>
</footer>
A practical admin panel can be organized as follows:
Top Navbar
↓
Sidebar
↓
Dashboard Header
↓
Statistics Cards
↓
Quick Actions
↓
Reports
↓
Recent Users
↓
Recent Orders
↓
Notifications
↓
Footer
Use responsive Bootstrap classes throughout the project.
container-fluid provides a full-width layout.col-12 makes content full-width on small screens.col-lg-3 can be used for a sidebar on larger screens.col-lg-9 can be used for main content.col-xl-2 and col-xl-10 provide a narrower
sidebar and wider content area on extra-large screens.col-sm-6 allows statistics cards to form two columns
from the small breakpoint.col-xl-3 allows four statistics cards in one row from
the extra-large breakpoint.table-responsive handles wide tables.d-flex and responsive Flexbox classes help arrange
navigation and actions.The responsive navbar and dropdown require Bootstrap JavaScript.
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
The Bootstrap bundle includes the JavaScript needed for components such as the navbar collapse and dropdown.
Here is the complete responsive Bootstrap admin panel project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
Bootstrap Admin Panel
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Top Navbar -->
<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="#adminNav"
aria-controls="adminNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse
navbar-collapse"
id="adminNav">
<form
class="d-flex
ms-lg-auto
me-lg-3
my-3
my-lg-0"
role="search">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search">
<button
class="btn
btn-outline-light"
type="submit">
Search
</button>
</form>
<div class="dropdown">
<button
class="btn
btn-secondary
dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Admin
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a
class="dropdown-item"
href="#">
Profile
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Settings
</a>
</li>
<li>
<hr
class="dropdown-divider">
</li>
<li>
<a
class="dropdown-item"
href="#">
Logout
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Main Layout -->
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<aside
class="col-12
col-lg-3
col-xl-2
bg-dark
p-3">
<h5
class="text-white
mb-3">
Admin Menu
</h5>
<div
class="list-group">
<a
href="#"
class="list-group-item
list-group-item-action
active">
Dashboard
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Users
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Students
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Courses
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Products
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Orders
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Payments
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Reports
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Settings
</a>
<a
href="#"
class="list-group-item
list-group-item-action">
Logout
</a>
</div>
</aside>
<!-- Main Content -->
<main
class="col-12
col-lg-9
col-xl-10
p-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 panel.
</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">
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">
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">
Pending
</p>
<h2>
35
</h2>
<span
class="badge
text-bg-warning">
Attention
</span>
</div>
</div>
</div>
</div>
<!-- Notifications -->
<div
class="row
g-4
mt-1">
<div
class="col-12
col-lg-6">
<div
class="alert
alert-info
mb-0"
role="alert">
<strong>
Notification:
</strong>
You have 5 new
notifications.
</div>
</div>
<div
class="col-12
col-lg-6">
<div
class="alert
alert-warning
mb-0"
role="alert">
<strong>
Attention:
</strong>
3 orders are waiting
for approval.
</div>
</div>
</div>
<!-- Main Cards -->
<div
class="row
g-4
mt-1">
<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>
<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 User
</button>
<button
class="btn
btn-success">
Add Product
</button>
<button
class="btn
btn-warning">
View Reports
</button>
<button
class="btn
btn-secondary">
Settings
</button>
</div>
</div>
</div>
</div>
<div
class="col-12
col-xl-8">
<div
class="card
shadow-sm">
<div
class="card-header">
<h5
class="mb-0">
Recent Orders
</h5>
</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>
<tbody>
<tr>
<td>
#1001
</td>
<td>
Rahul Kumar
</td>
<td>
₹5,000
</td>
<td>
<span
class="badge
text-bg-success">
Completed
</span>
</td>
</tr>
<tr>
<td>
#1002
</td>
<td>
Priya Singh
</td>
<td>
₹7,500
</td>
<td>
<span
class="badge
text-bg-warning">
Pending
</span>
</td>
</tr>
<tr>
<td>
#1003
</td>
<td>
Amit Kumar
</td>
<td>
₹10,000
</td>
<td>
<span
class="badge
text-bg-danger">
Cancelled
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div
class="col-12
col-xl-4">
<div
class="card
h-100
shadow-sm">
<div
class="card-header">
Monthly Progress
</div>
<div
class="card-body">
<div class="mb-4">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Sales
</span>
<span>
75%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Sales"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-success"
style="width:75%;">
</div>
</div>
</div>
<div class="mb-4">
<div
class="d-flex
justify-content-between
mb-1">
<span>
Users
</span>
<span>
60%
</span>
</div>
<div
class="progress"
role="progressbar"
aria-label="Users"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-info"
style="width:60%;">
</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"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100">
<div
class="progress-bar
bg-warning"
style="width:90%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer
class="border-top
mt-5
pt-4
text-center
text-body-secondary">
<p>
© 2026 Admin Panel.
All rights reserved.
</p>
</footer>
</main>
</div>
</div>
<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 panel containing the main components required for an administrative interface.
container-fluid for a full-width admin layout.
navbar and navbar-expand-lg for responsive
top navigation.
list-group for simple sidebar navigation.
card for statistics, reports, actions, and other
dashboard sections.
table-responsive for tables that may be wider than
the available screen.
d-grid gap-2 for vertically stacked action buttons.
col-12 col-sm-6 col-xl-3 for statistics cards.
h-100 when cards in the same row should fill the
available height.
Question: Which Bootstrap class is commonly used to make a table horizontally scrollable on smaller screens?