Support, all rights reserved. 2017 ©
Gradient Able v3.0 documentation.

Getting started

Gradient Able is fully responsive bootstrap 4 admin template for your complete need.


Bootstrap 4 Beta Framework

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Easily customizable

The internet is society’s true equalizer. It gives voices to the masses, as people from across the world can now express their opinions and ideals. Not since the industrial revolution, has humanity experienced such a game-changing invention.


HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web.

Responsive layout

Let this collection of responsive designed websites across a variety of website types help get your creative and developer juices flowing. Each site features a screenshot across 4 device widths and you can see the media queries.

Integrated plugins

You can enable one or more of the integrated Apache Cordova plugins to extend the functionality of your app. The integrated plugins are custom Apache Cordova plugins that the AppBuilder team modifies, configures and updates regularly.

Most advanced

Earum dignissimos odit, cumque impedit magnam nemo sint. Officiis iste expedita ad ipsum est dicta ut ex, ab quidem nobis.

What's included

  • assets/
    • css/
      • component.css
      • style.css
      • bootstrap-editable.css
      • responsive.css
      • samples.css
      • tm_validator.css
      • tm_editable.css
      • swiper.min.css
      • slick-theme.css
      • ...- More
    • icon/
      • flag-icon.min.css
      • icofont.css
      • themify-icons.css
      • icofont.css
      • ionicons.min.css
      • material-design-iconic-font.min.css
      • simple-line-icons.css
      • typicons.min.css
      • weather-icons-wind.min.css
      • weather-icons-wind.min.css
      • ...- More
    • images/
      • logo.png
      • user.png
      • other-a.png
      • ...-More
    • js/
      • bootstrap-growl.min.js
      • animation.js
      • classie.js
      • color-json-common-page.js
      • common-pages.js
      • jquery.quicksearch.js
      • modalEffects.js
      • swiper-custom.js
      • ...- More
    • custom Page Js/
      • accordion.js
      • ace-editor.js
      • advance-form.js
      • animation.js
      • button-fab.js
      • ...-More
    • Default.html
    • Ecommerce.html
    • CRN.html
    • Analytics.html
    • Project.html

File structure

Let's talk about what's inside the package.

Docs file hierarchy
  • Expand all
  • Collapse all
  • assets/css - All plugins stylesheet cover under css/ folder
    • style.css - Mash able custom made css must required for all the files
    • component.css - responsive layout included media queries
    • ...more - more css files listed under css folder
  • assets/icon - Internal Icon font's required stylesheet and font cover under icon/ folder
    • flag-icon.css
    • icofont.css
    • themify.css
    • ico-fonts.css
    • ion-icon.css
    • material-design.css
    • simple-line-icons.css
    • ....more
  • assets/images - Required images cover under images/ folder
    • logo.png
    • user.png
    • ...more
  • assets/js - Gradient Able required javascript files cover under js/ folder
    • animation.js
    • bootstrap-growl.min.js
    • classie.min.js
    • modalEffects.min.js
    • rating.js
    • ...more
  • assets/pages Page wise custom javascript cover under pages/ folder.
    • accordion.js
    • advance-form.js
    • animation.js
    • ...more
  • assets/plugins - Gradient Able custom plugins javascript cover under plugins/ folder
    • ace-editor.css
    • ...more
  • index.html - quis cum ratione laboriosam ducimus iure voluptates quaerat si
  • dashboard-ecommerce.html - omnis ipsa quas vel alias illum nostrum deleniti officiis
  • dashboard-crm.html - libero et id laborum laboriosam dignissimos a! cum molestia
  • Project.html - libero et id laborum laboriosam dignissimos a! cum molestia
  • Analytics.html - libero et id laborum laboriosam dignissimos a! cum molestia
  • ... - Entire files comes under root/ folder

Default Page Layout

Gradient Able- Comman page layout structure

Gradient Able comes with 11+ different pages layout where template's sidebar menu change everytime. Below is the default page layout of Gradient Able admin template.


Yep, as simple as that.

Bower Install

Bower Information

Please note that all detail about Bower visit official main website -

You also must install "Bower Installer" for - Tool for installing bower dependencies that won't include entire repos. Although Bower works great as a light-weight tool to quickly install browser dependencies, it currently does not provide much functionality for installing specific "built" components for the client. Visit Github for more detail

Bower Install


<!-- Bower Install -->

$ npm install -g bower

<!--After Install Bower - Required to Install "Bower Installer" --> 

<!--Install bower-installer by executing -->
$ npm install -g bower-installer

<!--From the terminal in the same directory as your bower.json file, enter:-->
$ bower-installer
<!-- After above command it will run bower.json file and all bower components copy into "build" folder-->



SCSS Basics

Please note that all Detail main Web Site.. Click Here..

SCSS files


    <!-- Variables SCSS Syntax -->

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;

   <!-- Nesting SCSS Syntax -->
   nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;

Css files


<!-- Nesting CSS Syntax -->
body {
font: 100% Helvetica, sans-serif;
color: #333;

<!-- Nesting CSS Syntax -->

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;

nav li {
  display: inline-block;

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;

CSS Classes Reference

Extra small devices Portrait phones (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.hidden-xs-down Visible Visible Visible Visible
.hidden-sm-down Visible Visible Visible
.hidden-md-down Visible Visible
.hidden-lg-down Visible
.hidden-sm-up Visible
.hidden-md-up Visible Visible
.hidden-lg-up Visible Visible Visible
.hidden-xl-up Visible Visible Visible Visible


Plugins Name Plugins page use Plugins css customize js Link
Ace-editor ____ ____ View Resource
Animation style.css assets/pages/animation.js View Resource
Calender fullcalendar.css assets/pages/animation.js View Resource
Charts c3.css chart-chartjs.js View Resource
Ck-Editor editor.css assets/pages/ckeditor-custom.js View Resource
Color-Picker spectrum.css assets/pages/advance-form.js View Resource
Count Down ___ assets/pages/countdown.js View Resource
Data-Table buttons.dataTables.min.css assets/pages/data-table.js View Resource
Date Picker bootstrap-material-datetimepicker.css assets/pages/advance-form.js View Resource
E-Charts assets/pages/echart.js View Resource
Edit-Table ____ assets/pages/editable.js View Resource
File-Upload dropzone.css __ View Resource
Foo-Table footable.standalone.min.css assets/pages/foo-table.js View Resource
Form-Mask __ assets/pages/form-mask.js View Resource
Forms-Wizard-Validation jquery.steps.css assets/pages/form-validation.js View Resource
Gallery lightgallery.css assets/pages/gallery.js View Resource
Grid Stack __ assets/pages/gridstack.js View Resource
High lighter shThemeDefault.css assets/pages/gridstack.js View Resource
Image-Crop cropper.css assets/pages/croper.js View Resource
Isotope __ assets/pages/landing-page.js View Resource
Jq Pagination jqpagination.css assets/pages/other.js View Resource
Jquery-Fab jquery-fab.css assets/pages/button-fab.js View Resource
Light-Box lightbox.css assets/pages/gallery.js View Resource
Light-Box2 lightbox.css assets/pages/gallery.js View Resource
list __ assets/pages/list-custom.js View Resource
List-Scroll stroll.css assets/pages/list-custom.js View Resource
Map-Google __ assets/pages/google-maps.js View Resource
Map-Vector jquery-jvectormap.css assets/pages/map-vector.js View Resource
Max-length __ assets/pages/advance-form.js View Resource
Modal component.css assets/pages/modal.js View Resource
Multi-select bootstrap-multiselect.css assets/pages/advance-form.js View Resource
Nestable nestable.css assets/pages/nestable.js View Resource
Notification notification.css assets/pages/notification.js View Resource
Pricing style.css __ View Resource
Radial style.css __ View Resource
Range-Slider bootstrap-slider.css assets/pages/range-slider.js View Resource
Rating rating.css __ View Resource
Responsive-Table rwd-table.min.css __ View Resource
Search rwd-table.min.css assets/js/main.js View Resource
Select2 select2.min.css assets/pages/advance-form.js View Resource
Slim Scroll __ assets/js/menu.js View Resource
Sortable __ assets/js/menu.js View Resource
Sticky jquery.postitall.css assets/pages/sticky.js View Resource
Summer Note summernote.css __ View Resource
Summer Note summernote.css __ View Resource
Sweet Alert sweetalert.css assets/pages/modal.js View Resource
Switchery switchery.min.css assets/pages/advance-form.js View Resource
Tags bootstrap-tagsinput.css assets/pages/advance-form.js View Resource
Task-Detail __ assets/pages/task-detail.js View Resource
TimeLine style.css __ View Resource
Todo __ assets/plugins/todo/js/todo.js View Resource
Tour enjoyhint.css assets/pages/tour.js View Resource
Tree-View treeview.css __ View Resource
Waves waves.min.css __ View Resource
Wysiwyg-Editor __ assets/pages/wysiwyg-editor.js View Resource
X-Editable __ assets/pages/xeditable.js View Resource

Browser support

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 9+. More specific support information is provided below.

  • Safari

  • Opera

  • FireFox

  • IE 9+


Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.

  • What is Gradient Able?

    Gradient Able is responsive admin template/dashboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dashboard etc. Without any trouble Gradient Able gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.
  • Why chooseGradient Able?

    Gradient Able built using bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.
  • Licence terms?

    Gradient Able comes with single license usage and support for every single purchase. If you want to use Gradient Able for multiple project you must buy the extra licence for that.
  • What about Item Support?

    We only support those purchaser who purchased Gradient Able. 6 months included support comes with every single purchase of Gradient Able.
  • What is Support Turnaround time ?

    When you comment or submit the ticket for support. Our team takes it very seriously and respond it within a Half or Full day.
  • How i rate the Gradient Able ?

    It just a simple. Go to your account. Then check your download section where you found Gradient Able Template. Click on start ratings. Simple !!!

Version Change Log

Detailed version change log describe below.

03-03-2017 v3.0 Release
- Minor bugs solved in design. 
05-12-2017 v2.0 Release
Angular 5 full template version included in package.
New Dashboard + Widgets variants included in package.

25-11-2017 - v1.0 Release