Lesson 58 of 60 – Bootstrap Admin Panel Project
97%

Bootstrap Admin Panel Project

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.

Project Goal: Create a responsive admin panel containing a sidebar, top navigation, dashboard statistics, recent users, recent orders, quick actions, notifications, and responsive tables.

1. Project Overview

An admin panel is an interface used by administrators to manage users, products, orders, reports, settings, and other application data.

Our project will contain:

  • Responsive sidebar.
  • Top navigation bar.
  • Dashboard heading.
  • Statistics cards.
  • Quick actions.
  • Recent users table.
  • Recent orders table.
  • Notifications.
  • Progress information.
  • Responsive layout.

2. Create the HTML Document

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>

3. Add Bootstrap CSS

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.

4. Create the Admin Navbar

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>

5. Add Navbar Navigation Links

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>

6. Create the Admin Layout

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.

7. Create the Sidebar

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>

8. Add Sidebar Menu Items

A practical admin sidebar can contain several management links.

  • Dashboard
  • Users
  • Students
  • Courses
  • Products
  • Orders
  • Payments
  • Reports
  • Settings
  • Logout
<a
href="#"
class="list-group-item
list-group-item-action">

    Users

</a>

9. Create the Dashboard Header

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>

10. Create Statistics Cards

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>

11. Add Multiple Statistics

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.

12. Add Status Badges

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.

13. Create the Users Table

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>

14. Add User Table Rows

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>

15. Create the Orders Table

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>

16. Add Quick Action Buttons

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>

17. Create a Quick Actions Card

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>

18. Create a Notifications Card

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>

19. Create a Progress Section

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>

20. Create a Reports Card

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>

21. Add an Admin Profile Dropdown

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>

22. Create a Search Form

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>

23. Create a Responsive Content Layout

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>

24. Make Tables Responsive

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.

25. Create an Admin Footer

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>

26. Organize the Complete Admin Panel

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

27. Make the Admin Panel Responsive

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.

28. Add Bootstrap JavaScript

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.

29. Complete Admin Panel Code

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>

30. Final Project Result

After completing this project, you will have a responsive Bootstrap admin panel containing the main components required for an administrative interface.

  • Responsive top navbar.
  • Admin sidebar.
  • Dashboard heading.
  • Statistics cards.
  • Status badges.
  • Notifications.
  • Recent users table.
  • Recent orders table.
  • Quick action buttons.
  • Monthly progress section.
  • Reports section.
  • Search form.
  • Admin profile dropdown.
  • Responsive grid layout.
  • Responsive tables.
  • Bootstrap cards.
  • Bootstrap buttons.
  • Bootstrap alerts.
  • Bootstrap progress bars.
Project Complete! You have created a complete responsive Bootstrap admin panel using the navbar, grid system, cards, tables, badges, alerts, dropdowns, progress bars, buttons, and responsive utilities.

📌 Key Points

  • Use container-fluid for a full-width admin layout.
  • Use responsive columns to create sidebar and main content areas.
  • Use navbar and navbar-expand-lg for responsive top navigation.
  • Use list-group for simple sidebar navigation.
  • Use card for statistics, reports, actions, and other dashboard sections.
  • Use table-responsive for tables that may be wider than the available screen.
  • Use badges to display compact status information.
  • Use alerts for important notifications and messages.
  • Use progress bars to display completion percentages.
  • Use dropdowns for compact administrator account actions.
  • Use d-grid gap-2 for vertically stacked action buttons.
  • Use responsive grid classes such as col-12 col-sm-6 col-xl-3 for statistics cards.
  • Use h-100 when cards in the same row should fill the available height.
  • Use semantic headings, labels, table headers, and accessible controls.
  • Real admin panels should connect these UI elements to backend authentication, authorization, databases, and server-side validation.

🧠 Quick Quiz

Question: Which Bootstrap class is commonly used to make a table horizontally scrollable on smaller screens?