Back to home

### Documentation

### Table of contents

- Introduction
- Getting started
- Basic structure
- Components
  - Basic UI Elements
  - Tables
  - Charts
  - Forms
  - Icons
  - Editors
- Credits

### Introduction

Star Admin2 is a responsive HTML template that is based on the CSS framework Bootstrap 5 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 Admin2 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 use Envato support form on our profile or email us at support@bootstrapdash.com

### Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

Star Admin 2 pro/ ├── template/ ├── css/ ├── fonts/ ├── images/ ├── js/ ├── pages/ ├── partials/ ├── index.html ├── scss/ ├── vendors/ ├── gulpfile.js ├── index.html ├── package.json ├── docs/ ├── documentation.html ├── documentation.js ├── CHANGELOG.md

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

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.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

npm install

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

npm install -g gulp-cli

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

gulp serve
It is important to run `gulp serve` command from the directory where the gulpfile.js is located.

### Basic structure

The below snippet shows the basic HTML structure of Star Admin2 . Please note that all the stylesheets and script files in the below snippet should be included to render Star Admin2 styles.

This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

<!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 Admin2 </title> <!-- plugins:css --> <link rel="stylesheet" href="vendors/feather/feather.css"> <link rel="stylesheet" href="vendors/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="vendors/ti-icons/css/themify-icons.css"> <link rel="stylesheet" href="vendors/typicons/typicons.css"> <link rel="stylesheet" href="vendors/simple-line-icons/css/simple-line-icons.css"> <link rel="stylesheet" href="vendors/css/vendor.bundle.base.css"> <!-- endinject --> <!-- Plugin css for this page --> <link rel="stylesheet" href="vendors/datatables.net-bs4/dataTables.bootstrap4.css"> <link rel="stylesheet" href="js/select.dataTables.min.css"> <!-- End plugin css for this page --> <!-- inject:css --> <link rel="stylesheet" href="css/vertical-layout-light/style.css"> <!-- endinject --> <link rel="shortcut icon" href="images/favicon.png" /> </head> <body> <div class="container-scroller"> <!-- partial:partials/_navbar.html --> <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row"> <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start"> <div class="me-3"> <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize"> <span class="icon-menu"></span> </button> </div> <div> <a class="navbar-brand brand-logo" href="index.html"> <img src="images/logo.svg" alt="logo" /> </a> <a class="navbar-brand brand-logo-mini" href="index.html"> <img src="images/logo-mini.svg" alt="logo" /> </a> </div> </div> <div class="navbar-menu-wrapper d-flex align-items-top"> <ul class="navbar-nav"> <li class="nav-item font-weight-semibold d-none d-lg-block ms-0"> <h1 class="welcome-text">Good Morning, <span class="text-black fw-bold">John Doe</span></h1> <h3 class="welcome-sub-text">Your performance summary this week </h3> </li> </ul> <ul class="navbar-nav ms-auto"> <li class="nav-item dropdown d-none d-lg-block"> <a class="nav-link dropdown-bordered dropdown-toggle dropdown-toggle-split" id="messageDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false"> Select Category </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="messageDropdown"> <a class="dropdown-item py-3" > <p class="mb-0 font-weight-medium float-left">Select category</p> </a> <div class="dropdown-divider"></div> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">Bootstrap Bundle </p> <p class="fw-light small-text mb-0">This is a Bundle featuring 16 unique dashboards</p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">Angular Bundle</p> <p class="fw-light small-text mb-0">Everything you’ll ever need for your Angular projects</p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">VUE Bundle</p> <p class="fw-light small-text mb-0">Bundle of 6 Premium Vue Admin Dashboard</p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">React Bundle</p> <p class="fw-light small-text mb-0">Bundle of 8 Premium React Admin Dashboard</p> </div> </a> </div> </li> <li class="nav-item d-none d-lg-block"> <div id="datepicker-popup" class="input-group date datepicker navbar-date-picker"> <span class="input-group-addon input-group-prepend border-right"> <span class="icon-calendar input-group-text calendar-icon"></span> </span> <input type="text" class="form-control"> </div> </li> <li class="nav-item"> <form class="search-form" action="#"> <i class="icon-search"></i> <input type="search" class="form-control" placeholder="Search Here" title="Search here"> </form> </li> <li class="nav-item dropdown"> <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-bs-toggle="dropdown"> <i class="icon-mail icon-lg"></i> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="notificationDropdown"> <a class="dropdown-item py-3 border-bottom"> <p class="mb-0 font-weight-medium float-left">You have 4 new notifications </p> <span class="badge badge-pill badge-primary float-right">View all</span> </a> <a class="dropdown-item preview-item py-3"> <div class="preview-thumbnail"> <i class="mdi mdi-alert m-auto text-primary"></i> </div> <div class="preview-item-content"> <h6 class="preview-subject fw-normal text-dark mb-1">Application Error</h6> <p class="fw-light small-text mb-0"> Just now </p> </div> </a> <a class="dropdown-item preview-item py-3"> <div class="preview-thumbnail"> <i class="mdi mdi-settings m-auto text-primary"></i> </div> <div class="preview-item-content"> <h6 class="preview-subject fw-normal text-dark mb-1">Settings</h6> <p class="fw-light small-text mb-0"> Private message </p> </div> </a> <a class="dropdown-item preview-item py-3"> <div class="preview-thumbnail"> <i class="mdi mdi-airballoon m-auto text-primary"></i> </div> <div class="preview-item-content"> <h6 class="preview-subject fw-normal text-dark mb-1">New user registration</h6> <p class="fw-light small-text mb-0"> 2 days ago </p> </div> </a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link count-indicator" id="countDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false"> <i class="icon-bell"></i> <span class="count"></span> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0" aria-labelledby="countDropdown"> <a class="dropdown-item py-3"> <p class="mb-0 font-weight-medium float-left">You have 7 unread mails </p> <span class="badge badge-pill badge-primary float-right">View all</span> </a> <div class="dropdown-divider"></div> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="images/faces/face10.jpg" alt="image" class="img-sm profile-pic"> </div> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">Marian Garner </p> <p class="fw-light small-text mb-0"> The meeting is cancelled </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="images/faces/face12.jpg" alt="image" class="img-sm profile-pic"> </div> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">David Grey </p> <p class="fw-light small-text mb-0"> The meeting is cancelled </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="images/faces/face1.jpg" alt="image" class="img-sm profile-pic"> </div> <div class="preview-item-content flex-grow py-2"> <p class="preview-subject ellipsis font-weight-medium text-dark">Travis Jenkins </p> <p class="fw-light small-text mb-0"> The meeting is cancelled </p> </div> </a> </div> </li> <li class="nav-item dropdown d-none d-lg-block user-dropdown"> <a class="nav-link" id="UserDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false"> <img class="img-xs rounded-circle" src="images/faces/face8.jpg" alt="Profile image"> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown"> <div class="dropdown-header text-center"> <img class="img-md rounded-circle" src="images/faces/face8.jpg" alt="Profile image"> <p class="mb-1 mt-3 font-weight-semibold">Allen Moreno</p> <p class="fw-light text-muted mb-0">allenmoreno@gmail.com</p> </div> <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-account-outline text-primary me-2"></i> My Profile <span class="badge badge-pill badge-danger">1</span></a> <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-message-text-outline text-primary me-2"></i> Messages</a> <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary me-2"></i> Activity</a> <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-help-circle-outline text-primary me-2"></i> FAQ</a> <a class="dropdown-item"><i class="dropdown-item-icon mdi mdi-power text-primary me-2"></i>Sign Out</a> </div> </li> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-bs-toggle="offcanvas"> <span class="mdi mdi-menu"></span> </button> </div> </nav> <!-- partial --> <div class="container-fluid page-body-wrapper"> <!-- partial:partials/_settings-panel.html --> <div class="theme-setting-wrapper"> <div id="settings-trigger"><i class="ti-settings"></i></div> <div id="theme-settings" class="settings-panel"> <i class="settings-close ti-close"></i> <p class="settings-heading">SIDEBAR SKINS</p> <div class="sidebar-bg-options selected" id="sidebar-light-theme"><div class="img-ss rounded-circle bg-light border me-3"></div>Light</div> <div class="sidebar-bg-options" id="sidebar-dark-theme"><div class="img-ss rounded-circle bg-dark border me-3"></div>Dark</div> <p class="settings-heading mt-2">HEADER SKINS</p> <div class="color-tiles mx-0 px-4"> <div class="tiles success"></div> <div class="tiles warning"></div> <div class="tiles danger"></div> <div class="tiles info"></div> <div class="tiles dark"></div> <div class="tiles default"></div> </div> </div> </div> <div id="right-sidebar" class="settings-panel"> <i class="settings-close ti-close"></i> <ul class="nav nav-tabs border-top" id="setting-panel" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="todo-tab" data-bs-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">TO DO LIST</a> </li> <li class="nav-item"> <a class="nav-link" id="chats-tab" data-bs-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">CHATS</a> </li> </ul> <div class="tab-content" id="setting-content"> <div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section"> <div class="add-items d-flex px-3 mb-0"> <form class="form w-100"> <div class="form-group d-flex"> <input type="text" class="form-control todo-list-input" placeholder="Add To-do"> <button type="submit" class="add btn btn-primary todo-list-add-btn" id="add-task">Add</button> </div> </form> </div> <div class="list-wrapper px-3"> <ul class="d-flex flex-column-reverse todo-list"> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Team review meeting at 3.00 PM </label> </div> <i class="remove ti-close"></i> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Prepare for presentation </label> </div> <i class="remove ti-close"></i> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Resolve all the low priority tickets due today </label> </div> <i class="remove ti-close"></i> </li> <li class="completed"> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" checked> Schedule meeting for next week </label> </div> <i class="remove ti-close"></i> </li> <li class="completed"> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" checked> Project review </label> </div> <i class="remove ti-close"></i> </li> </ul> </div> <h4 class="px-3 text-muted mt-5 fw-light mb-0">Events</h4> <div class="events pt-4 px-3"> <div class="wrapper d-flex mb-2"> <i class="ti-control-record text-primary me-2"></i> <span>Feb 11 2018</span> </div> <p class="mb-0 font-weight-thin text-gray">Creating component page build a js</p> <p class="text-gray mb-0">The total number of sessions</p> </div> <div class="events pt-4 px-3"> <div class="wrapper d-flex mb-2"> <i class="ti-control-record text-primary me-2"></i> <span>Feb 7 2018</span> </div> <p class="mb-0 font-weight-thin text-gray">Meeting with Alisa</p> <p class="text-gray mb-0 ">Call Sarah Graves</p> </div> </div> <!-- To do section tab ends --> <div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section"> <div class="d-flex align-items-center justify-content-between border-bottom"> <p class="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0">Friends</p> <small class="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 fw-normal">See All</small> </div> <ul class="chat-list"> <li class="list active"> <div class="profile"><img src="images/faces/face1.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Thomas Douglas</p> <p>Available</p> </div> <small class="text-muted my-auto">19 min</small> </li> <li class="list"> <div class="profile"><img src="images/faces/face2.jpg" alt="image"><span class="offline"></span></div> <div class="info"> <div class="wrapper d-flex"> <p>Catherine</p> </div> <p>Away</p> </div> <div class="badge badge-success badge-pill my-auto mx-2">4</div> <small class="text-muted my-auto">23 min</small> </li> <li class="list"> <div class="profile"><img src="images/faces/face3.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Daniel Russell</p> <p>Available</p> </div> <small class="text-muted my-auto">14 min</small> </li> <li class="list"> <div class="profile"><img src="images/faces/face4.jpg" alt="image"><span class="offline"></span></div> <div class="info"> <p>James Richardson</p> <p>Away</p> </div> <small class="text-muted my-auto">2 min</small> </li> <li class="list"> <div class="profile"><img src="images/faces/face5.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Madeline Kennedy</p> <p>Available</p> </div> <small class="text-muted my-auto">5 min</small> </li> <li class="list"> <div class="profile"><img src="images/faces/face6.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Sarah Graves</p> <p>Available</p> </div> <small class="text-muted my-auto">47 min</small> </li> </ul> </div> <!-- chat tab ends --> </div> </div> <!-- partial --> <!-- partial:partials/_sidebar.html --> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html"> <i class="mdi mdi-grid-large menu-icon"></i> <span class="menu-title">Dashboard</span> </a> </li> <li class="nav-item nav-category">UI Elements</li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic"> <i class="menu-icon mdi mdi-floor-plan"></i> <span class="menu-title">UI Elements</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="ui-basic"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a></li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a></li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li> </ul> </div> </li> <li class="nav-item nav-category">Forms and Datas</li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements"> <i class="menu-icon mdi mdi-card-text-outline"></i> <span class="menu-title">Form elements</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="form-elements"> <ul class="nav flex-column sub-menu"> <li class="nav-item"><a class="nav-link" href="pages/forms/basic_elements.html">Basic Elements</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts"> <i class="menu-icon mdi mdi-chart-line"></i> <span class="menu-title">Charts</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="charts"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/charts/chartjs.html">ChartJs</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables"> <i class="menu-icon mdi mdi-table"></i> <span class="menu-title">Tables</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="tables"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/tables/basic-table.html">Basic table</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#icons" aria-expanded="false" aria-controls="icons"> <i class="menu-icon mdi mdi-layers-outline"></i> <span class="menu-title">Icons</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="icons"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/icons/mdi.html">Mdi icons</a></li> </ul> </div> </li> <li class="nav-item nav-category">pages</li> <li class="nav-item"> <a class="nav-link" data-bs-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth"> <i class="menu-icon mdi mdi-account-circle-outline"></i> <span class="menu-title">User Pages</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="auth"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Login </a></li> </ul> </div> </li> <li class="nav-item nav-category">help</li> <li class="nav-item"> <a class="nav-link" href="http://bootstrapdash.com/demo/star-admin2-free/docs/documentation.html"> <i class="menu-icon mdi mdi-file-document"></i> <span class="menu-title">Documentation</span> </a> </li> </ul> </nav> <!-- partial --> <div class="main-panel"> <div class="content-wrapper"> <div class="row"> <div class="col-sm-12"> <div class="home-tab"> <div class="d-sm-flex align-items-center justify-content-between border-bottom"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active ps-0" id="home-tab" data-bs-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">Overview</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#audiences" role="tab" aria-selected="false">Audiences</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#demographics" role="tab" aria-selected="false">Demographics</a> </li> <li class="nav-item"> <a class="nav-link border-0" id="more-tab" data-bs-toggle="tab" href="#more" role="tab" aria-selected="false">More</a> </li> </ul> <div> <div class="btn-wrapper"> <a href="#" class="btn btn-otline-dark align-items-center"><i class="icon-share"></i> Share</a> <a href="#" class="btn btn-otline-dark"><i class="icon-printer"></i> Print</a> <a href="#" class="btn btn-primary text-white me-0"><i class="icon-download"></i> Export</a> </div> </div> </div> <div class="tab-content tab-content-basic"> <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview"> <div class="row"> <div class="col-sm-12"> <div class="statistics-details d-flex align-items-center justify-content-between"> <div> <p class="statistics-title">Bounce Rate</p> <h3 class="rate-percentage">32.53%</h3> <p class="text-danger d-flex"><i class="mdi mdi-menu-down"></i><span>-0.5%</span></p> </div> <div> <p class="statistics-title">Page Views</p> <h3 class="rate-percentage">7,682</h3> <p class="text-success d-flex"><i class="mdi mdi-menu-up"></i><span>+0.1%</span></p> </div> <div> <p class="statistics-title">New Sessions</p> <h3 class="rate-percentage">68.8</h3> <p class="text-danger d-flex"><i class="mdi mdi-menu-down"></i><span>68.8</span></p> </div> <div class="d-none d-md-block"> <p class="statistics-title">Avg. Time on Site</p> <h3 class="rate-percentage">2m:35s</h3> <p class="text-success d-flex"><i class="mdi mdi-menu-down"></i><span>+0.8%</span></p> </div> <div class="d-none d-md-block"> <p class="statistics-title">New Sessions</p> <h3 class="rate-percentage">68.8</h3> <p class="text-danger d-flex"><i class="mdi mdi-menu-down"></i><span>68.8</span></p> </div> <div class="d-none d-md-block"> <p class="statistics-title">Avg. Time on Site</p> <h3 class="rate-percentage">2m:35s</h3> <p class="text-success d-flex"><i class="mdi mdi-menu-down"></i><span>+0.8%</span></p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-8 d-flex flex-column"> <div class="row flex-grow"> <div class="col-12 col-lg-4 col-lg-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="d-sm-flex justify-content-between align-items-start"> <div> <h4 class="card-title card-title-dash">Performance Line Chart</h4> <h5 class="card-subtitle card-subtitle-dash">Lorem Ipsum is simply dummy text of the printing</h5> </div> <div id="performance-line-legend"></div> </div> <div class="chartjs-wrapper mt-5"> <canvas id="performaneLine"></canvas> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 d-flex flex-column"> <div class="row flex-grow"> <div class="col-md-6 col-lg-12 grid-margin stretch-card"> <div class="card bg-primary card-rounded"> <div class="card-body pb-0"> <h4 class="card-title card-title-dash text-white mb-4">Status Summary</h4> <div class="row"> <div class="col-sm-4"> <p class="status-summary-ight-white mb-1">Closed Value</p> <h2 class="text-info">357</h2> </div> <div class="col-sm-8"> <div class="status-summary-chart-wrapper pb-4"> <canvas id="status-summary"></canvas> </div> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="row"> <div class="col-sm-6"> <div class="d-flex justify-content-between align-items-center mb-2 mb-sm-0"> <div class="circle-progress-width"> <div id="totalVisitors" class="progressbar-js-circle pr-2"></div> </div> <div> <p class="text-small mb-2">Total Visitors</p> <h4 class="mb-0 fw-bold">26.80%</h4> </div> </div> </div> <div class="col-sm-6"> <div class="d-flex justify-content-between align-items-center"> <div class="circle-progress-width"> <div id="visitperday" class="progressbar-js-circle pr-2"></div> </div> <div> <p class="text-small mb-2">Visits per day</p> <h4 class="mb-0 fw-bold">9065</h4> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-8 d-flex flex-column"> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="d-sm-flex justify-content-between align-items-start"> <div> <h4 class="card-title card-title-dash">Market Overview</h4> <p class="card-subtitle card-subtitle-dash">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </div> <div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle toggle-dark btn-lg mb-0 me-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> This month </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <h6 class="dropdown-header">Settings</h6> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div> <div class="d-sm-flex align-items-center mt-1 justify-content-between"> <div class="d-sm-flex align-items-center mt-4 justify-content-between"><h2 class="me-2 fw-bold">$36,2531.00</h2><h4 class="me-2">USD</h4><h4 class="text-success">(+1.37%)</h4></div> <div class="me-3"><div id="marketing-overview-legend"></div></div> </div> <div class="chartjs-bar-wrapper mt-3"> <canvas id="marketingOverview"></canvas> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded table-darkBGImg"> <div class="card-body"> <div class="col-sm-8"> <h3 class="text-white upgrade-info mb-0"> Enhance your <span class="fw-bold">Campaign</span> for better outreach </h3> <a href="#" class="btn btn-info upgrade-btn">Upgrade Account!</a> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="d-sm-flex justify-content-between align-items-start"> <div> <h4 class="card-title card-title-dash">Pending Requests</h4> <p class="card-subtitle card-subtitle-dash">You have 50+ new requests</p> </div> <div> <button class="btn btn-primary btn-lg text-white mb-0 me-0" type="button"><i class="mdi mdi-account-plus"></i>Add new member</button> </div> </div> <div class="table-responsive mt-1"> <table class="table select-table"> <thead> <tr> <th> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </th> <th>Customer</th> <th>Company</th> <th>Progress</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </td> <td> <div class="d-flex "> <img src="images/faces/face1.jpg" alt=""> <div> <h6>Brandon Washington</h6> <p>Head admin</p> </div> </div> </td> <td> <h6>Company name 1</h6> <p>company type</p> </td> <td> <div> <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap"> <p class="text-success">79%</p> <p>85/162</p> </div> <div class="progress progress-md"> <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td><div class="badge badge-opacity-warning">In progress</div></td> </tr> <tr> <td> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </td> <td> <div class="d-flex"> <img src="images/faces/face2.jpg" alt=""> <div> <h6>Laura Brooks</h6> <p>Head admin</p> </div> </div> </td> <td> <h6>Company name 1</h6> <p>company type</p> </td> <td> <div> <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap"> <p class="text-success">65%</p> <p>85/162</p> </div> <div class="progress progress-md"> <div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td><div class="badge badge-opacity-warning">In progress</div></td> </tr> <tr> <td> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </td> <td> <div class="d-flex"> <img src="images/faces/face3.jpg" alt=""> <div> <h6>Wayne Murphy</h6> <p>Head admin</p> </div> </div> </td> <td> <h6>Company name 1</h6> <p>company type</p> </td> <td> <div> <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap"> <p class="text-success">65%</p> <p>85/162</p> </div> <div class="progress progress-md"> <div class="progress-bar bg-warning" role="progressbar" style="width: 38%" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td><div class="badge badge-opacity-warning">In progress</div></td> </tr> <tr> <td> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </td> <td> <div class="d-flex"> <img src="images/faces/face4.jpg" alt=""> <div> <h6>Matthew Bailey</h6> <p>Head admin</p> </div> </div> </td> <td> <h6>Company name 1</h6> <p>company type</p> </td> <td> <div> <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap"> <p class="text-success">65%</p> <p>85/162</p> </div> <div class="progress progress-md"> <div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td><div class="badge badge-opacity-danger">Pending</div></td> </tr> <tr> <td> <div class="form-check form-check-flat mt-0"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" aria-checked="false"><i class="input-helper"></i></label> </div> </td> <td> <div class="d-flex"> <img src="images/faces/face5.jpg" alt=""> <div> <h6>Katherine Butler</h6> <p>Head admin</p> </div> </div> </td> <td> <h6>Company name 1</h6> <p>company type</p> </td> <td> <div> <div class="d-flex justify-content-between align-items-center mb-1 max-width-progress-wrap"> <p class="text-success">65%</p> <p>85/162</p> </div> <div class="progress progress-md"> <div class="progress-bar bg-success" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </td> <td><div class="badge badge-opacity-success">Completed</div></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-md-6 col-lg-6 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body card-rounded"> <h4 class="card-title card-title-dash">Recent Events</h4> <div class="list align-items-center border-bottom py-2"> <div class="wrapper w-100"> <p class="mb-2 font-weight-medium"> Change in Directors </p> <div class="d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="mdi mdi-calendar text-muted me-1"></i> <p class="mb-0 text-small text-muted">Mar 14, 2019</p> </div> </div> </div> </div> <div class="list align-items-center border-bottom py-2"> <div class="wrapper w-100"> <p class="mb-2 font-weight-medium"> Other Events </p> <div class="d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="mdi mdi-calendar text-muted me-1"></i> <p class="mb-0 text-small text-muted">Mar 14, 2019</p> </div> </div> </div> </div> <div class="list align-items-center border-bottom py-2"> <div class="wrapper w-100"> <p class="mb-2 font-weight-medium"> Quarterly Report </p> <div class="d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="mdi mdi-calendar text-muted me-1"></i> <p class="mb-0 text-small text-muted">Mar 14, 2019</p> </div> </div> </div> </div> <div class="list align-items-center border-bottom py-2"> <div class="wrapper w-100"> <p class="mb-2 font-weight-medium"> Change in Directors </p> <div class="d-flex justify-content-between align-items-center"> <div class="d-flex align-items-center"> <i class="mdi mdi-calendar text-muted me-1"></i> <p class="mb-0 text-small text-muted">Mar 14, 2019</p> </div> </div> </div> </div> <div class="list align-items-center pt-3"> <div class="wrapper w-100"> <p class="mb-0"> <a href="#" class="fw-bold text-primary">Show all <i class="mdi mdi-arrow-right ms-2"></i></a> </p> </div> </div> </div> </div> </div> <div class="col-md-6 col-lg-6 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="d-flex align-items-center justify-content-between mb-3"> <h4 class="card-title card-title-dash">Activities</h4> <p class="mb-0">20 finished, 5 remaining</p> </div> <ul class="bullet-line-list"> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Ben Tossell</span> assign you a task</div> <p>Just now</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Oliver Noah</span> assign you a task</div> <p>1h</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Jack William</span> assign you a task</div> <p>1h</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Leo Lucas</span> assign you a task</div> <p>1h</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Thomas Henry</span> assign you a task</div> <p>1h</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Ben Tossell</span> assign you a task</div> <p>1h</p> </div> </li> <li> <div class="d-flex justify-content-between"> <div><span class="text-light-green">Ben Tossell</span> assign you a task</div> <p>1h</p> </div> </li> </ul> <div class="list align-items-center pt-3"> <div class="wrapper w-100"> <p class="mb-0"> <a href="#" class="fw-bold text-primary">Show all <i class="mdi mdi-arrow-right ms-2"></i></a> </p> </div> </div> </div> </div> </div> </div> </div> <div class="col-lg-4 d-flex flex-column"> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <div class="d-flex justify-content-between align-items-center"> <h4 class="card-title card-title-dash">Todo list</h4> <div class="add-items d-flex mb-0"> <!-- <input type="text" class="form-control todo-list-input" placeholder="What do you need to do today?"> --> <button class="add btn btn-icons btn-rounded btn-primary todo-list-add-btn text-white me-0 pl-12p"><i class="mdi mdi-plus"></i></button> </div> </div> <div class="list-wrapper"> <ul class="todo-list todo-list-rounded"> <li class="d-block"> <div class="form-check w-100"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Lorem Ipsum is simply dummy text of the printing <i class="input-helper rounded"></i> </label> <div class="d-flex mt-2"> <div class="ps-4 text-small me-3">24 June 2020</div> <div class="badge badge-opacity-warning me-3">Due tomorrow</div> <i class="mdi mdi-flag ms-2 flag-color"></i> </div> </div> </li> <li class="d-block"> <div class="form-check w-100"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Lorem Ipsum is simply dummy text of the printing <i class="input-helper rounded"></i> </label> <div class="d-flex mt-2"> <div class="ps-4 text-small me-3">23 June 2020</div> <div class="badge badge-opacity-success me-3">Done</div> </div> </div> </li> <li> <div class="form-check w-100"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Lorem Ipsum is simply dummy text of the printing <i class="input-helper rounded"></i> </label> <div class="d-flex mt-2"> <div class="ps-4 text-small me-3">24 June 2020</div> <div class="badge badge-opacity-success me-3">Done</div> </div> </div> </li> <li class="border-bottom-0"> <div class="form-check w-100"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Lorem Ipsum is simply dummy text of the printing <i class="input-helper rounded"></i> </label> <div class="d-flex mt-2"> <div class="ps-4 text-small me-3">24 June 2020</div> <div class="badge badge-opacity-danger me-3">Expired</div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <div class="d-flex justify-content-between align-items-center mb-3"> <h4 class="card-title card-title-dash">Type By Amount</h4> </div> <canvas class="my-auto" id="doughnutChart" height="200"></canvas> <div id="doughnut-chart-legend" class="mt-5 text-center"></div> </div> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <div class="d-flex justify-content-between align-items-center mb-3"> <div> <h4 class="card-title card-title-dash">Leave Report</h4> </div> <div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle toggle-dark btn-lg mb-0 me-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Month Wise </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3"> <h6 class="dropdown-header">week Wise</h6> <a class="dropdown-item" href="#">Year Wise</a> </div> </div> </div> </div> <div class="mt-3"> <canvas id="leaveReport"></canvas> </div> </div> </div> </div> </div> </div> </div> <div class="row flex-grow"> <div class="col-12 grid-margin stretch-card"> <div class="card card-rounded"> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <div class="d-flex justify-content-between align-items-center mb-3"> <div> <h4 class="card-title card-title-dash">Top Performer</h4> </div> </div> <div class="mt-3"> <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom"> <div class="d-flex"> <img class="img-sm rounded-10" src="images/faces/face1.jpg" alt="profile"> <div class="wrapper ms-3"> <p class="ms-1 mb-1 fw-bold">Brandon Washington</p> <small class="text-muted mb-0">162543</small> </div> </div> <div class="text-muted text-small"> 1h ago </div> </div> <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom"> <div class="d-flex"> <img class="img-sm rounded-10" src="images/faces/face2.jpg" alt="profile"> <div class="wrapper ms-3"> <p class="ms-1 mb-1 fw-bold">Wayne Murphy</p> <small class="text-muted mb-0">162543</small> </div> </div> <div class="text-muted text-small"> 1h ago </div> </div> <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom"> <div class="d-flex"> <img class="img-sm rounded-10" src="images/faces/face3.jpg" alt="profile"> <div class="wrapper ms-3"> <p class="ms-1 mb-1 fw-bold">Katherine Butler</p> <small class="text-muted mb-0">162543</small> </div> </div> <div class="text-muted text-small"> 1h ago </div> </div> <div class="wrapper d-flex align-items-center justify-content-between py-2 border-bottom"> <div class="d-flex"> <img class="img-sm rounded-10" src="images/faces/face4.jpg" alt="profile"> <div class="wrapper ms-3"> <p class="ms-1 mb-1 fw-bold">Matthew Bailey</p> <small class="text-muted mb-0">162543</small> </div> </div> <div class="text-muted text-small"> 1h ago </div> </div> <div class="wrapper d-flex align-items-center justify-content-between pt-2"> <div class="d-flex"> <img class="img-sm rounded-10" src="images/faces/face5.jpg" alt="profile"> <div class="wrapper ms-3"> <p class="ms-1 mb-1 fw-bold">Rafell John</p> <small class="text-muted mb-0">Alaska, USA</small> </div> </div> <div class="text-muted text-small"> 1h ago </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- content-wrapper ends --> <!-- partial:partials/_footer.html --> <footer class="footer"> <div class="d-sm-flex justify-content-center justify-content-sm-between"> <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Premium <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap admin template</a> from BootstrapDash.</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Copyright © 2021. All rights reserved.</span> </div> </footer> <!-- partial --> </div> <!-- main-panel ends --> </div> <!-- page-body-wrapper ends --> </div> <!-- container-scroller --> <!-- plugins:js --> <script src="vendors/js/vendor.bundle.base.js"></script> <!-- endinject --> <!-- Plugin js for this page --> <script src="vendors/chart.js/Chart.min.js"></script> <script src="vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script> <script src="vendors/progressbar.js/progressbar.min.js"></script> <!-- End plugin js for this page --> <!-- inject:js --> <script src="js/off-canvas.js"></script> <script src="js/hoverable-collapse.js"></script> <script src="js/template.js"></script> <script src="js/settings.js"></script> <script src="js/todolist.js"></script> <!-- endinject --> <!-- Custom js for this page--> <script src="js/dashboard.js"></script> <script src="js/Chart.roundedBarCharts.js"></script> <!-- End custom js for this page--> </body> </html>

### Components

#### Basic UI Elements

##### Button with the single color

<div class="row"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> </div>

##### Outlined

<div class="row"> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> </div>

##### Sizes

<div class="row"> <button type="button" class="btn btn-primary btn-lg">Small</button> <button type="button" class="btn btn-secondary">Medium</button> <button type="button" class="btn btn-success btn-sm">Large</button> </div>

##### Bootstrap Dropdown

<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

##### Dropdown Outlined

<div class="btn-group"> <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>

#### Tables

To create a basic Twitter Bootstrap table, add the following code.

<table class="table"> <thead> <tr class=""> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row">2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td scope="row">3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>

Bootstrap-table is an extended Bootstrap table with radio, checkbox, sort, pagination, and other added features.

#### Usage

To use Bootstrap-table in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/bootstrap-table/dist/bootstrap-table.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>

Activate Bootstrap table without writing JavaScript, set data-bs-toggle="table" on a normal table.

<table data-bs-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table>

#### Charts

Chart.js is a simple yet flexible JavaScript charting for designers & developers.

#### Usage

To use Chart.js in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" />

and the following script files in <body>.

<script src="path-to/node_modules/chart.js/dist/Chart.min.js"></script>

To create a simple chart, add the following code:

<canvas id="lineChart" height="250"></canvas> <script> var data = { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }; var options = { scales: { yAxes: [{ ticks: { beginAtZero:true } }] }, legend: { display: false }, elements: { point: { radius: 0 } } }; if($("#lineChart").length) { var lineChartCanvas = $("#lineChart").get(0).getContext("2d"); var lineChart = new Chart(lineChartCanvas, { type: 'line', data: data, options: options }); } </script>

#### Forms

The basic form elements can be added to your application as below:

<form class="forms-sample"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control p-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted text-success"><span class="fa fa-info mt-1"></span> We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control p-input" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleTextarea">Example textarea</label> <textarea class="form-control p-input" id="exampleTextarea" rows="3"></textarea> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small> </div> <fieldset class="form-group"> <legend class="mb-4 mt-5">Radio buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> <div class="form-check col-12"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> Check me out </label> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>

#### Icons

Material Design Icons growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

#### Usage

To use Material Design Icons in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/mdi/css/materialdesignicons.min.css"/>

To generate an icon, add the following code:

<i class="ti-bell"></i>

#### Editors

Tinymce is a full-featured web editing tool.

#### Usage

To use Tinymce in your application, include the following files in <body>.

<script src="path-to/node_modules/tinymce/tinymce.min.js"></script>

To create an editor using tinymce, add the following code:

<textarea id='tinyMceExample'></textarea> <script> tinymce.init({ selector: '#tinyMceExample', height: 500, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help' ], toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help', image_advtab: true, templates: [{ title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css' ] }); </script>

X-editable allows you to create editable elements on your page. It can be used with any engine (Bootstrap, jQuery-UI, jQuery only) and includes both popup and inline modes.

#### Usage

To use x-editable in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>

To create a simple editable text field, add the following code:

<a href="#" id="username" data-type="text" data-pk="1">awesome</a> <script> $.fn.editable.defaults.mode = 'inline'; $.fn.editableform.buttons = '<button type="submit" class="btn btn-primary btn-sm editable-submit">' + '<i class="fa fa-fw fa-check"></i>' + '</button>' + '<button type="button" class="btn btn-default btn-sm editable-cancel">' + '<i class="fa fa-fw fa-times"></i>' + '</button>'; $('#username').editable({ type: 'text', pk: 1, name: 'username', title: 'Enter username' }); </script>

Summernote is a super simple WYSIWYG Editor.

#### Usage

To use summernote in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/summernote-bootstrap4/dist/summernote.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/summernote-bootstrap4/dist/summernote.min.js"></script>

To create a summernote editor, add the following code:

<div id="summernoteExample"></div> <script> $('#summernoteExample').summernote({ height: 300, tabsize: 2 }); </script>

SimpleMDE is a simple, beautiful, and embeddable JavaScript Markdown editor.

#### Usage

To use simpleMDE in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/simplemde/dist/simplemde.min.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/simplemde/dist/simplemde.min.js"></script>

To create an editor using simpleMDE, add the following code:

<textarea id="simpleMde">Start editing here</textarea> <script> if($("#simpleMde").length) { var simplemde = new SimpleMDE({ element: $("#simpleMde")[0] }); } </script>

Quill is a free, open source WYSIWYG editor built for the modern web.

#### Usage

To use Quill in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/quill/dist/quill.snow.css" />

Add the following script files in <body>.

<script src="path-to/node_modules/quill/dist/quill.min.js"></script>

To create an editor using Quill, add the following code:

<div id="quillExample" class="quill-container"></div> <script> var quill = new Quill('#quillExample', { modules: { toolbar: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: 'Compose an epic...', theme: 'snow' // or 'bubble' }); </script>

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.

#### Usage

To use ace editor in your application, include the following files in <body>.

<script src="path-to/node_modules/ace-builds/src/ace.js"></script> <script src="path-to/node_modules/ace-builds/src-min/mode-javascript.js"></script> <script src="path-to/node_modules/ace-builds/src-min/theme-chaos.js"></script><!--Choose any theme you wish-->

To create a code editor using ace with a sample code, add the following code:

<div id="aceExample" class="ace-editor"> var x = add(4, 3); // Function is called, return value will end up in x function add(a, b) { return a + b; // Function returns the sum of a and b } var y = mul(4, 3); // Function is called, return value will end up in y function add(a, b) { return a * b; // Function returns the product of a and b } </div> <script> var editor = ace.edit("aceExample"); editor.setTheme("ace/theme/chaos"); //set theme editor.getSession().setMode("ace/mode/javascript"); //set mode document.getElementById('aceExample').style.fontSize='1rem'; //styling </script>

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

#### Usage

To use CodeMirror in your application, include the following files in <head>.

<link rel="stylesheet" href="path-to/node_modules/codemirror/lib/codemirror.css" /> <link rel="stylesheet" href="path-to/node_modules/codemirror/theme/ambiance.css" /><!--Choose a theme you wish-->

Add the following script files in <body>.

<script src="path-to/node_modules/codemirror/lib/codemirror.js"></script> <script src="path-to/node_modules/codemirror/mode/javascript/javascript.js"></script>

Here is an example of an editor using CodeMirror.

<textarea rows="4" cols="50" name="code-editable" id="code-editable"> <script> var x = 3; var y = 4; var z = x + y; </script> </textarea> <script> var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('code-editable'), { mode: "javascript", theme: "ambiance", lineNumbers: true }); </script>

### Credits

We have used the following plugins in Star Admin2

- 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 Mapael 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/