Intoduction

Star Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Star Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme, please email us at :

support@bootstrapdash.com

Getting Started

This part of the doc will help you to quick start your project and will give you a basic idea about how StarAdmin works.

What's In The Box

Once you have download the package you will see the following folder structure inside the folder.

StarAdmin Pro/
├── Gulp-tasks/         // Contains Various Gulp tasks
├── src/                // Contains the raw source code of HTML, javascript, scss, images etc.
├   ├─ assets/          // Contains Javascript,SCSS,CSS,images,fonts
├   ├─ demo_1/          // Contains HTML files for Default Layout
├   ├─ demo_2/          // Contains HTML files for Default 2 Layout
├   ├─ demo_3/          // Contains HTML files for Default Dark Layout
├   ├─ demo_4/          // Contains HTML files for Analytics Dashboard
├   ├─ demo_5/          // Contains HTML files for Marketing Dashboard
├   ├─ demo_6/          // Contains HTML files for CRM Dashboard
├   ├─ demo_7/          // Contains HTML files for Modern Dashboard
├   ├─ demo_8/          // Contains HTML files for E-commerce Dashboard
├   ├─ demo_9/          // Contains HTML files for Finance Dashboard
├   ├─ demo_10/         // Contains HTML files for Classic Dashboard
├   ├─ demo_11/         // Contains HTML files for Horizontal Layout
├   ├─ docs/            // Template documentation
├   ├─ index.html
├── CHANGELOG.md
├── gulpfile.js
├── package.json

We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task bundleVendors to rebuild the vendor files.

Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer. Follow these steps to get started.

Install Nodejs from Nodejs Official Page
Open your terminal and navigate to the root folder of the project
Run npm install -g gulp-cli

The command installs Gulp-cli globally on your machine. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Next,

Run npm install from the root directory of your project folder to install dependencies
After you have successfully completed npm install, then run gulp serve to run the template, and a new tab will be opened in your browser.
Now you are good to go and start customizing the template. :)

HTML Structure

01 - Default Layout

Below is the basic HTML structure default layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
  <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
  <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- Plugin css for this page -->
  <!-- End Plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../assets/css/shared/style.css">
  <!-- endinject -->
  <!-- Layout styles -->
  <link rel="stylesheet" href="../assets/css/demo_1/style.css">
  <!-- End Layout styles -->
  <link rel="shortcut icon" href="../assets/images/favicon.png" />
</head>

<body>
  <div class="container-scroller">
    <!-- navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- navbar -->
    <div class="container-fluid page-body-wrapper">
      <!-- settings panel -->
      <div class="settings-panel">
        ...
      </div>
      <!-- settings panel -->
      <!-- sidebar -->
      <nav class="sidebar sidebar-offcanvas" id="sidebar">
      </nav>
      <!-- sidebar -->
      <div class="main-panel">
        <div class="content-wrapper">
          ...
        </div>
        <!-- content-wrapper ends -->
        <!-- footer -->
        <footer class="footer">
          ...
        </footer>
        <!-- footer -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
  <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script src="../assets/js/shared/off-canvas.js"></script>
  <script src="../assets/js/shared/hoverable-collapse.js"></script>
  <script src="../assets/js/shared/misc.js"></script>
  <script src="../assets/js/shared/settings.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../assets/js/demo_1/dashboard.js"></script>
  <!-- End custom js for this page-->
</body>

</html>

02 - Default 2 Dashboard

Below is the basic HTML structure default 2 layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_2/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <!-- navbar -->
      <nav class="navbar">
        ...
      </nav>
      <!-- navbar -->
      <div class="container-fluid page-body-wrapper">
        <!-- settings panel -->
        <div class="settings-panel">
          ...
        </div>
        <!-- settings panel -->
        <!-- sidebar -->
        <nav class="sidebar" id="sidebar">

        </nav>
        <!-- sidebar -->
        <div class="main-panel">
          <div class="content-wrapper">
            ...
          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          <footer class="footer">
            ...
          </footer>
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <script src="../assets/js/shared/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_2/dashboard.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

03 - Default Dark Layout

Below is the basic HTML structure default dark layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
  <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
  <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- Plugin css for this page -->
  <!-- End Plugin css for this page -->
  <!-- Layout styles -->
  <link rel="stylesheet" href="../assets/css/demo_3/style.css">
  <!-- End Layout styles -->
  <link rel="shortcut icon" href="../assets/images/favicon.png" />
</head>

<body>
  <div class="container-scroller">
    <!-- navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- navbar -->
    <div class="container-fluid page-body-wrapper">
      <!-- settings panel -->
      <div class="settings-panel">
        ...
      </div>
      <!-- settings panel -->
      <!-- sidebar -->
      <nav class="sidebar sidebar-offcanvas" id="sidebar">
      </nav>
      <!-- sidebar -->
      <div class="main-panel">
        <div class="content-wrapper">
          ...
        </div>
        <!-- content-wrapper ends -->
        <!-- footer -->
        <footer class="footer">
          ...
        </footer>
        <!-- footer -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
  <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script src="../assets/js/shared/off-canvas.js"></script>
  <script src="../assets/js/shared/hoverable-collapse.js"></script>
  <script src="../assets/js/shared/misc.js"></script>
  <script src="../assets/js/shared/settings.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../assets/js/demo_1/dashboard.js"></script>
  <!-- End custom js for this page-->
</body>

</html>

04 - Analytics Dashboard

Below is the basic HTML structure analytics dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
  <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
  <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- Plugin css for this page -->
  <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
  <!-- End Plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../assets/css/shared/style.css">
  <!-- endinject -->
  <!-- Layout styles -->
  <link rel="stylesheet" href="../assets/css/demo_4/style.css">
  <!-- End Layout styles -->
  <link rel="shortcut icon" href="../assets/images/favicon.png" />
</head>

<body class="dark-theme sidebar-dark">
  <div class="container-scroller">
    <!-- navbar -->
    <div class="navbar fixed-top">
      ...
    </div>
    <!-- navbar -->
    <!-- settings -->
    <div class="right-sidebar-toggler-wrapper">
      ...
    </div>
    <!-- settings -->
    <div class="container-fluid page-body-wrapper">
      <!-- sidebar -->
      <div class="sidebar sidebar-offcanvas" id="sidebar-icon-only">
        ...
      </div>
      <!-- sidebar -->
      <div class="main-panel">
        <div class="content-wrapper">
          ...
        </div>
        <!-- content-wrapper ends -->
        <!-- footer -->
        <footer class="footer">
          ...
        </footer>
        <!-- footer -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
  <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script src="../assets/js/shared/off-canvas.js"></script>
  <script src="../assets/js/shared/hoverable-collapse.js"></script>
  <script src="../assets/js/shared/misc.js"></script>
  <script src="../assets/js/shared/settings.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../assets/js/shared/widgets.js"></script>
  <script src="../assets/js/demo_4/dashboard.js"></script>
  <script src="../assets/js/shared/data-table.js"></script>
  <!-- End custom js for this page-->
</body>

</html>

05 - Marketing Dashboard

Below is the basic HTML structure marketing dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/ti-icons/css/themify-icons.css">
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_5/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body class="sidebar-dark">
    <div class="container-scroller">
      <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
          <!-- navbar -->
          <div class="navbar fixed-top">
            ...
          </div>
          <!-- navbar -->
          <!-- settings panel -->
          <div class="right-sidebar-toggler-wrapper">
            ...
          </div>
          <!-- settings panel -->
          <div class="page-header-toolbar">
            <div class="nav">
              <div class="nav-item page-head-item dropdown">
                <small class="head-tittle">Dashboard</small>
                <h4 class="page-heading font-weight-medium">Sales & Marketing <i class="mdi mdi-chevron-down text-muted"></i></h4>
              </div>
              <div class="nav-item">
                <small class="head-tittle">START DATE</small>
                <p class="page-heading">Oct 10, 2018</p>
              </div>
              <div class="nav-item">
                <small class="head-tittle">END DATE</small>
                <p class="page-heading">Oct 10, 2018</p>
              </div>
              <div class="nav-item">
                <small class="head-tittle">EVENT CATEGORY</small>
                <p class="page-heading">All Categories<i class="mdi mdi-chevron-down ml-1 text-muted"></i></p>
              </div>
            </div>
          </div>
          <div class="content-wrapper">
          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          <footer class="footer">
            ...
          </footer>
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <script src="../assets/js/shared/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_5/dashboard.js"></script>
    <script src="../assets/js/demo_5/script.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

06 - CRM Dashboard

Below is the basic HTML structure CRM dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_6/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <div class="container-fluid page-body-wrapper">
        <!-- top header-->
        <div class="top-header">
          ...
        </div>
        <!-- top header-->
        <!-- settings panel-->
        <div class="settings panel">
          ...
        </div>
        <!-- settings panel-->
        <div class="main-panel">
          <div class="hero-banner">
            <!-- navbar -->
            <div class="navbar">
              ...
            </div>
            <!-- navbar -->
          </div>
          <div class="content-wrapper container-wrapper-width">
            <!-- sidebar -->
            <div class="sidebar-menu">
              ...
            </div>
            <!-- sidebar -->
            <div class="content-area">
              <div class="page-header">
                <h4 class="page-title">CRM Dashboard</h4>
                <div class="page-header-content">
                  <div class="server-load">
                    <p>Server Load</p>
                    <div class="chart-wrapper">
                      <canvas id="server-load-data-chart" height="20" width="80"></canvas>
                    </div>
                    <p class="font-weight-bold">50%</p>
                  </div>
                  <div class="dropdown mt-3 mt-sm-0 d-none d-sm-block">
                    <button class="btn dropdown-toggle" type="button" id="report-weeks" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Today : <span class="text-white">Jan 23</span></button>
                    <div class="dropdown-menu" aria-labelledby="report-weeks">
                      <a class="dropdown-item" href="#">Yesterday</a>
                      <a class="dropdown-item" href="#">Last Week</a>
                      <a class="dropdown-item" href="#">Last Month</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-area-inner">
                ...
              </div>
              <!-- content aside right -->
              <div class="content-aside-right">
                ...
              </div>
              <!-- content aside right -->
            </div>
          </div>
          <!-- content-wrapper ends -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <script src="../assets/js/shared/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_6/dashboard.js"></script>
    <script src="../assets/js/demo_6/script.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

07 - Modern Dashboard

Below is the basic HTML structure modern dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_7/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <!-- navbar -->
      <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
      </nav>
      <!-- navbar -->
      <!-- settings panel -->
      <div class="settings-panel">
        ...
      </div>
      <!-- settings panel -->
      <div class="container-fluid page-body-wrapper">
        <!-- sidebar -->
        <nav class="sidebar sidebar-offcanvas dynamic-active-class-disabled" id="sidebar">
          ...
        </nav>
        <!-- sidebar -->
        <div class="main-panel">
          <div class="content-wrapper">
            ...
          </div>
          <!-- content-wrapper ends -->
          <!-- footer -->
          <footer class="footer">
            ...
          </footer>
          <!-- footer -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <script src="../assets/js/shared/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_7/dashboard.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

08 - E-commerce Dashboard

Below is the basic HTML structure e-commerce dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_8/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <div class="container-fluid page-body-wrapper">
        <!-- sidebar -->
        <nav class="sidebar sidebar-offcanvas dynamic-active-class-disabled" id="sidebar">
          ...
        </nav>
        <!-- sidebar -->
        <div class="main-panel">
          <!-- navbar -->
          <nav class="navbar col-lg-12 col-12 p-0 d-flex flex-row">
            ...
          </nav>
          <!-- navbar -->
          <!-- settings panel -->
          <div class="settings-panel">
            ...
          </div>
          <!-- settings panel -->
          <div class="content-wrapper">
            ...
          </div>
          <!-- content-wrapper ends -->
          <!-- footer -->
          <footer class="footer">
            ...
          </footer>
          <!-- footer -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <script src="../assets/js/shared/jq.tablesort.js"></script>
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_8/dashboard.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

09 - Finance Dashboard

Below is the basic HTML structure finance dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css" />
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_9/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
          <div class="hero-banner">
            <!-- navbar -->
            <div class="navbar">
              ...
            </div>
            <!-- navbar -->
            <!-- settings panel -->
            <div class="settings-panel">
              ...
            </div>
            <!-- settings panel -->
          </div>
          <div class="content-wrapper container-wrapper-width">
            <!-- sidebar -->
            <div class="sidebar-menu">
              ...
            </div>
            <!-- sidebar -->
            <div class="content-area">
              <div class="page-header">
                <div class="info-section">
                  <div class="d-flex align-items-center mb-2">
                    <h4 class="page-title">Hi, welcome back!</h4>
                    <div class="dropdown">
                      <button class="btn dropdown-toggle" type="button" id="reportSummary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Weekly</button>
                      <div class="dropdown-menu" aria-labelledby="reportSummary">
                        <a class="dropdown-item" href="#">Daily</a>
                        <a class="dropdown-item" href="#">Weekly</a>
                        <a class="dropdown-item" href="#">Monthly</a>
                      </div>
                    </div>
                  </div>
                  <p class="mb-3 mb-md-0">Your customer Management dashboard template.</p>
                </div>
                <div class="page-header-content">
                  <div class="server-load d-block d-sm-flex">
                    <div class="server-stats d-flex flex-row align-items-end me-5">
                      <div class="server-stats-title me-4">
                        <p class="head-title">Memory Usage</p>
                        <h3 class="text-white mb-0 stats-count font-weight-medium">32.44%</h3>
                      </div>
                      <div class="wrapper">
                        <canvas id="server-load-data-chart-1" height="45" width="80"></canvas>
                      </div>
                    </div>
                    <div class="server-stats d-flex flex-row align-items-end mt-4 mt-sm-0">
                      <div class="server-stats-title me-4">
                        <p class="head-title">Disk Usage</p>
                        <h3 class="text-white mb-0 stats-count font-weight-medium">52.40%</h3>
                      </div>
                      <div class="wrapper">
                        <canvas id="server-load-data-chart-2" height="45" width="80"></canvas>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-area-inner">
                ...
              </div>
            </div>
          </div>
          <!-- content-wrapper ends -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_9/dashboard.js"></script>
    <script src="../assets/js/demo_9/script.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

10 - Classic Dashboard

Below is the basic HTML structure classic dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_10/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <!-- navbar -->
      <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        ...
      </nav>
      <!-- navbar -->
      <!-- settings panel -->
      <div class="settings-panel">
        ...
      </div>
      <!-- settings panel -->
      <div class="container-fluid page-body-wrapper">
        <!-- sidebar -->
        <nav class="sidebar sidebar-offcanvas dynamic-active-class-disabled" id="sidebar">
          ...
        </nav>
        <!-- sidebar -->
        <div class="main-panel">
          <div class="content-wrapper">
            ...
          </div>
          <!-- content-wrapper ends -->
          <!-- footer -->
          <footer class="footer">
            ...
          </footer>
          <!-- footer -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/demo_10/dashboard.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

11 - Horizontal Dashboard

Below is the basic HTML structure horizontal dashboard layout of StarAdmin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Premium Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ionicons/css/ionicons.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/src/font/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/flag-icon-css/css/flag-icon.min.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <!-- End Plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/shared/style.css">
    <!-- endinject -->
    <!-- Layout styles -->
    <link rel="stylesheet" href="../assets/css/demo_11/style.css">
    <!-- End Layout styles -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />
  </head>
  <body>
    <div class="container-scroller">
      <!-- horizontal navbar-->
      <nav class="navbar horizontal-layout col-lg-12 col-12 p-0">
        ...
      </nav>
      <!-- horizontal navbar-->
      <!-- settings panel -->
      <div class="settings-panel">
        ...
      </div>
      <!-- settings panel -->
      <div class="container-fluid page-body-wrapper">
        <div class="main-panel container">
          <div class="content-wrapper">
            ...
          </div>
          <!-- content-wrapper ends -->
          <!-- footer -->
          <footer class="footer">
            ...
          </footer>
          <!-- footer -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="../assets/js/shared/off-canvas.js"></script>
    <script src="../assets/js/shared/hoverable-collapse.js"></script>
    <script src="../assets/js/shared/misc.js"></script>
    <script src="../assets/js/shared/settings.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/shared/widgets.js"></script>
    <script src="../assets/js/demo_11/dashboard.js"></script>
    <script src="../assets/js/demo_11/script.js"></script>
    <!-- End custom js for this page-->
  </body>
</html>

Elements

Custom styling classes for alerts, buttons, etc. are explained in the live preview of this template. Feel free to use it in your page. Any components that are beyond of this template, may submit a request and suggestion to our email at support@boostrapdash.com

Credits

Ace editor https://ace.c9.io/
Bootstrap https://getbootstrap.com/
Bootstrap Datepicker https://gitter.im/uxsolutions/bootstrap-datepicker
Bootstrap Maxlength http://mimo84.github.com/bootstrap-maxlength
C3 https://travis-ci.org/c3js/c3
Chart.js https://www.chartjs.org/
Chartist https://gionkunz.github.io/chartist-js/
Clipboard https://clipboardjs.com
Codemirror https://codemirror.net/
Colcade https://github.com/desandro/colcade/
D3 https://d3js.org
Datatables.net https://datatables.net/
Dragula https://bevacqua.github.io/dragula/
Dropify http://jeremyfagis.github.io/dropify/
Dropzone http://www.dropzonejs.com/
Flag icons http://lipis.github.io/flag-icon-css/
Flot https://www.flotcharts.org/
Font awesome https://fontawesome.com/
Full calendar https://fullcalendar.io/
Gulp https://gulpjs.com/
Icheck http://icheck.fronteed.com/
Inputmask http://robinherbots.github.io/Inputmask/
Ion range slider http://ionden.com/a/plugins/ion.rangeSlider/en.html
JQuery https://jquery.com/
JQuery asColorPicker https://github.com/thecreation/jquery-asColorPicker
JQuery bar rating http://antenna.io/demo/jquery-bar-rating/examples/
JQuery context menu http://swisnl.github.io/jQuery-contextMenu/
JQuery file upload http://hayageek.com/docs/jquery-upload-file.php
JQuery Mapeal https://github.com/neveldo/mapael-maps
JQuery sparklin http://omnipotent.net/jquery.sparkline/
JQuery-steps http://www.jquery-steps.com/
JQuery Tags Input http://xoxco.com/projects/code/tagsinput/

JQuery Toast https://kamranahmed.info/toast
JQuery Validation https://jqueryvalidation.org/
JQuery Avgrund https://github.com/voronianski/jquery.avgrund.js
JQuery Repeater http://briandetering.net/repeater
JSgrid http://js-grid.com/
JSgrid http://js-grid.com/
Justgage http://justgage.com/
JVector Map http://jvectormap.com/
Light gallery http://sachinchoolur.github.io/lightGallery/
Material Design Icons https://materialdesignicons.com/
Moment.js https://momentjs.com/
Morris.js https://momentjs.com/
NoUISlider https://refreshless.com/nouislider/
Owl carousel https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
Perfect scrollbar http://utatti.github.io/perfect-scrollbar/
Popper.js https://popper.js.org/
Progressbar.js https://progressbarjs.readthedocs.io
PWS Tabs https://alexchizhov.com/pwstabs/
Quill Editor https://quilljs.com/
Rapheal http://dmitrybaranovskiy.github.io/raphael/
Select 2 https://select2.org/
Simple line icons http://simplelineicons.com/
SimpleMDE https://simplemde.com/
Summernote https://summernote.org/
Sweetalert http://sweetalert.js.org
Tempusdominus-bootstrap-4 https://tempusdominus.github.io/bootstrap-4/
Themify icons https://themify.me/themify-icons
TinyMCE https://www.tiny.cloud/
TWBS pagination https://esimakin.github.io/twbs-pagination/
Typeahead https://twitter.github.io/typeahead.js/
Xeditable https://vitalets.github.io/x-editable/

Customer Support

We will assist you any problem you encounter while buidling your dashboard via Star Admin template

Email: support@bootstrapdash.com

We use comment help form found here and email to manage customer support. We will respond to you as quickly as we can. Thank you.

Star Admin

Introduction

HTML Structure

Other Information

Intoduction

Getting Started

What's In The Box

Installation

HTML Structure

01 - Default Layout

02 - Default 2 Dashboard

03 - Default Dark Layout

04 - Analytics Dashboard

05 - Marketing Dashboard

06 - CRM Dashboard

07 - Modern Dashboard

08 - E-commerce Dashboard

09 - Finance Dashboard

10 - Classic Dashboard

11 - Horizontal Dashboard

Elements

Credits

Customer Support