Documentation

Buy Now

Table of contents

Introduction

An admin dashboard is crucial for any web application. It provides administrators with a comprehensive overview of crucial metrics, data insights, and management tools all in one centralized location. An admin dashboard template is a pre-designed framework with a variety of customizable components ready to meet the different kinds of businesses and industries.

Letstart Admin Dashboards is a perfect template to meet various kinds of business needs. Our admin dashboard template is a responsive HTML dashboard template that is based on the CSS framework Bootstrap 5.3. It's built on Sass, jQuery, and HTML5.

Letstart Admin Dashboard Panel provides real-time insights, customizable features, and collaborative tools that empower administrators to manage their assets digitally and drive their business more efficiently.

Letstart Admin HTML Template is a ready-made, easy-to-customize, and multipurpose admin dashboard design that's specially designed for multipurpose html admin panels, SaaS admin panels, Saas dashboards, Analytics admin dashboards, Real-time admin panels, eCommerce admin dashboards, minimal SaaS admins, etc.

Letstart admin HTML5 panel is a responsive, modern, and easy-to-use admin dashboard with many ready-made HTML components, Charts, Tables, calendars, and Widgets. This admin panel is easy to incorporate with Angular and React dashboard designs.

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 Letstart 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 feel free to raise support ticket on marketplace.

Please give 5 star rating to our template, as rating will help other people to trust our template.

Change Log

20 April 2024
  • Bug fix
  • Remove library which doesn't support Bootstrap 5
  • Updated to Bootstrap 5.3

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. You'll see something like this:

Dependencies

  • Gulp
  • Bootstrap
  • SaSS
  • Node

Support

We are committed to our customers and support is at up most priority. If you have any question, issue with Letstart Admin, please feel free to contact us anytime by following ways: We have also planned to add tons of updates and improvements which you will receive free of cost.

To report bug. Kindly generate ticket on marketplace support portal.

What's includes

  • Answering your questions or problems regarding the template.
  • Giving or Solving bugs report by you.

What's not includes

  • Customization Work
  • Support for third party plugins.
  • Support or guide how to integrate with backend technologies(like php, java, .net, etc).

Browser Support

Letstart admin template is built to work in the latest desktop and mobile and tablet browsers.

  • Chrome (latest)
  • FireFox (latest)
  • Safari (latest)
  • Opera (latest)
  • Edge (latest)

Installation

Note: we recommanded you to please make your one own css file & one js files and add that in your page, so whenever the update of Marvel admin comes it does not affect your code.
Download a Package Source From our Store.
Install Node.js From https://nodejs.org/en/download/
After that open command promt or any other terminal and go to Package Path.

cd [root] / code /

Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.

npm install --global npm@latest

To check weather is node succesfully install or not.

npm --version
For yarn package manager.

npm install --global yarn

To check weather is yarn succesfully install or not.

yarn --version
Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):

npm install

Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:

gulp default or npm start

How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder.

How to Install npm packages?

npm install packagename, this command will install the package in node modules.

Layout Configurations

We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layout.

Layout Class to be added on the body tag
Icon menu small-nav
Fixed Layout fixed-layout
Fixed Header fixed-header
Navbar Background bg-warning, bg-danger, bg-primary
Sidebar Background sidebar-light, sidebar-dark, bg-warning, bg-danger, bg-primary

Basic structure

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

Components

Basic UI Elements

Bootstrap Accordion
image

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin

image

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin

Button with the single color
Button with Outline
Button Sizes
Badges
Primary Primary Primary Primary Primary Primary
Card

Titles, text, and links

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Line Tab

To make tab responsive add tabs-container with nav class and wrap <ul> with div with tab-responsive class.

Basic UI Elements 2

Progress Bar
Default Tooltips
Notifications
This is a primary alert — check it out!
This is a primary alert — check it out!
Thumbnail

Miscellaneous

Dragula ,Drag and drop so simple it hurts.

Usage

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

Add the following script files in <body>.

To create a drag n drop list, add the following code:

Clipboard, a modern approach to copy text to the clipboard.

Usage

Add the following script files in <body>.

To create a clipboard, add the following code:

Context Menu

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Click Here to see the official documentation.

Usage

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

Add the following script files in <body>.

To create a context menu, add the following code:

noUiSlider is a range slider without bloat.

Usage

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

Add the following script files in <body>.

To create a slider, add the following code:

Easy, flexible and responsive range slider with skin support. Click Here to see the official documentation.

Usage

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

Add the following script files in <body>.

To create a slider, add the following code:

Tables

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

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

Add the following script files in <body>.

To create a data table, add the following code:

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

To create a simple chart, add the following code:

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

Usage

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

Add the following script files in <body>.

To create a simple chart, add the following code:

Chartist is a simple JavaScript charting library for designers & developers.

Usage

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

Add the following script files in <body>.

To create a simple chart, add the following code:

Dygraphs is a simple JavaScript charting library for designers & developers.

Usage

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

Add the following script files in <body>.

To create a simple chart, add the following code:

Flot chart is a simple JavaScript charting library for designers & developers.

Usage

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

To create a simple chart, add the following code:

Morris is a simple JavaScript charting library for designers & developers.

Usage

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

Add the following script files in <body>.

To create a simple chart, add the following code:

Plottable js is a simple JavaScript charting library for designers & developers.

Usage

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

Add the following script files in <body>.

To create a simple chart, add the following code:

Maps

JvectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.

Usage

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

Add the following script files in <body>.

To create a simple map, add the following code:

Forms

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

We are using Jquery validation for creating simple clientside form validation.

Usage

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

The following code shows validation of a simple form:

We are using Jquery Smart Wizard for creating simple smart wizard.

Usage

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

Add the following script files in <body>.

To create a simple wizard, add the following code:

We are using Bootstrap Duallist for creating Bootstrap Duallist.

Usage

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

Add the following script files in <body>.

To create a simple wizard, add the following code:

Selects and Tags

We are using Bootstrap Select for creating select.

Usage

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

Add the following script files in <body>

To create a Bootstrap Select, add the following code:

We are using Bootstrap multiselect for creating multiselect dropdown.

Usage

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

Add the following script files in <body>.

To create a Bootstrap multiselect, add the following code:

We are using Select2 for creating multiselect dropdown.

Usage

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

Add the following script files in <body>.

To create a Select2, add the following code:

We are using Select2 for creating multiselect dropdown.

Usage

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

Add the following script files in <body>.

To create a Select2, add the following code:

Pickers

We are using Bootstrap DatePicker for creating datepicker.

Usage

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

Add the following script files in <body>.

To create a Bootstrap Datepicker, add the following code:

We are using Pignose Calender for creating stylish calender.

Usage

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

Add the following script files in <body>.

To create a Pignose Calender, add the following code:

We are using Date Range Picker for creating date range picker.

Usage

To use Date Range Picker in your application, include the following files in <head>.

Add the following script files in <body>.

To create a Bootstrap Date Range Picker, add the following code:

We are using Jquery Minicolors for creating Color picker.

Usage

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

Add the following script files in <body>.

To create a Color Picker, add the following code:

Editors

We are using Bootstrap Markdown for creating editor.

Usage

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

Add the following script files in <body>.

To create a Bootstrap Markdown, add the following code:

We are using Quill for creating editor.

Usage

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

Add the following script files in <body>.

To create a Quill, add the following code:

We are using Simple MDE markdown for creating editor.

Usage

To use Simple MDE markdown in your application, include the following files in <head>.

Add the following script files in <body>.

To create a Simple MDE markdown, add the following code:

File Upload

We are using Dropzone for creating file upload.

Usage

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

Add the following script files in <body>.

To create a Dropzone, add the following code:

We are using Flow js for creating editor.

Usage

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

To create a File upload with flow js, add the following code:

Icons

We are using Material Design Icons for creating google icon.

Usage

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

To generate an icon, add the following code:

We are using Font Awesome for creating icon.

Usage

To use Font Awesome Icons in your application, include the following files in <head>.

To generate an icon, add the following code:

We are using Simple Line Icons for creating icon.

Usage

To use Simple Line Icons in your application, include the following files in <head>.

To generate an icon, add the following code: