Lesson 54 of 60 – Bootstrap Dashboard Project
90%

Bootstrap Dashboard Project

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.

Project Goal: Create a responsive admin dashboard that displays statistics, recent users, recent orders, progress information, and quick actions.

1. Project Overview

Our dashboard will contain several important sections.

  • Dashboard heading.
  • Quick statistics cards.
  • Revenue information.
  • User information.
  • Order information.
  • Progress bars.
  • Recent users table.
  • Recent orders table.
  • Quick action buttons.
  • Responsive layout.

We will create the dashboard using Bootstrap classes instead of writing custom CSS.

2. Create the HTML Document

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>

3. Add Bootstrap CSS

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.

4. Create the Dashboard Container

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.

5. Create the Dashboard Header

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.

6. Create the Statistics Row

Create a row for dashboard statistics.

<div class="row g-4">

    Statistics Cards

</div>

The g-4 utility provides spacing between the cards.

7. Create the Total Users Card

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.

8. Create the Revenue Card

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>

9. Create the Orders Card

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>

10. Create the Pending Card

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>

11. Understand the Statistics Grid

Our four statistics cards use:

col-12 col-sm-6 col-xl-3

This produces:

  • One card per row on very small screens.
  • Two cards per row from the small breakpoint.
  • Four cards per row from the extra-large breakpoint.

The Bootstrap grid contains 12 columns, so:

3 + 3 + 3 + 3 = 12

12. Create a Main Dashboard Row

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.

13. Create a Revenue Summary Card

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.

14. Add Progress Bars

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>

15. Create a Dashboard Progress Section

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>

16. Create a Recent Users Card

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.

17. Create the Users Table Header

Create columns for the user table.

<thead>

    <tr>

        <th>
            Name
        </th>

        <th>
            Email
        </th>

        <th>
            Status
        </th>

        <th>
            Action
        </th>

    </tr>

</thead>

18. 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>

19. Create a Recent Orders Card

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>

20. Add Order Status Badges

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.

21. Create Quick Actions

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>

22. 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 Student

            </button>


            <button
            class="btn btn-success">

                Add Course

            </button>


            <button
            class="btn btn-warning">

                View Reports

            </button>

        </div>


    </div>


</div>

23. Create the Main Dashboard Grid

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.

24. Make the Dashboard Responsive

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.

25. Add a Dashboard Footer Information

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.

26. Create a Dashboard Navigation Bar

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>

27. Organize the Dashboard Sections

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.

28. Complete Dashboard Structure

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>

29. Complete Project Code

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>

30. Final Project Result

After completing this project, you will have a responsive Bootstrap admin dashboard containing multiple useful components.

  • Responsive navigation bar.
  • Dashboard heading.
  • Statistics cards.
  • User statistics.
  • Revenue statistics.
  • Order statistics.
  • Progress bars.
  • Monthly goals.
  • Recent users table.
  • Recent orders table.
  • Status badges.
  • Quick action buttons.
  • Responsive tables.
  • Responsive Bootstrap grid.
  • Bootstrap cards and shadows.
Project Complete! You have created a responsive Bootstrap dashboard using the grid system, cards, tables, badges, progress bars, buttons, Flexbox, spacing utilities, and responsive navigation.

📌 Key Points

  • Use container-fluid when dashboard content needs more horizontal space.
  • Use row g-4 to organize dashboard sections with spacing.
  • Use col-12 col-sm-6 col-xl-3 for responsive statistic cards.
  • Use card and card-body for dashboard panels.
  • Use h-100 when cards should fill the available column height.
  • Use table-responsive to make wide tables usable on smaller screens.
  • Use Bootstrap badges for compact status labels.
  • Use progress bars to show completion or goal percentages.
  • Use Flexbox utilities to align dashboard headings and actions.
  • Use d-grid gap-2 for vertically stacked dashboard actions.
  • Use responsive grid classes to make the dashboard mobile-friendly.
  • Use semantic table headings and meaningful labels for accessibility.
  • Do not rely only on color to communicate status or important information.
  • Real dashboard data should normally come from a database or API rather than hard-coded values.
  • Bootstrap provides the layout and styling; application logic must be implemented separately.

🧠 Quick Quiz

Question: Which Bootstrap class is especially useful for making a wide table scroll horizontally on smaller screens?