Flat Able v2.0 documentation.

Getting started

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


Bootstrap 4 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 - Flat 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 - Flat 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 - Flat 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

Basic Page Layout

Flat Able- Comman page layout structure

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


Yep, as simple as that.

CSS & jQuery required

Please note that all CSS and JavaScript plugins require to be included, as shown in the sample.html page.

Css files


	<!-- Google font-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

    <!-- iconfont -->
    <link rel="stylesheet" type="text/css" href="assets/icon/icofont/css/icofont.css">

    <!-- simple line icon -->
    <link rel="stylesheet" type="text/css" href="assets/icon/simple-line-icons/css/typicons.css">

    <!-- Required Fremwork -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- Flag Icon css -->
    <link rel="stylesheet" href="assets/pages/flag-icon/flag-icon.min.css " type="text/css" media="all">

    <!--  Menu-Search css -->
    <link href="assets/pages/menu-search/css/component.css" rel="stylesheet">

    <!-- flag icon framework css -->
    <script src="assets/pages/flag-icon/flag-icon.min.css"></script>

    <!-- Style.css -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!--color css-->
    <link rel="stylesheet" type="text/css" href="assets/css/color/color-1.css" id="color"/>

Js files


	<!-- Required Jqurey -->
	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
	<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
	<script src="../bower_components/tether/dist/js/tether.min.js"></script>

	<!-- Required Fremwork -->
	<script src="assets/js/bootstrap.min.js"></script>

	<!-- slimscroll.js -->
	<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>

	<!-- modernizr js-->
	<script src="../bower_components/modernizr/modernizr.js"></script>
	<script src="../bower_components/modernizr/feature-detects/css-scrollbars.js"></script>

	<!--classic JS-->
	<script src="assets/plugins/search/js/classie.js"></script>

	<!-- notification -->
	<script src="../bower_components/i18next/i18next.min.js"></script>
    <script src="../bower_components/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>
    <script src="../bower_components/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.min.js"></script>
    <script src="../bower_components/jquery-i18next/jquery-i18next.min.js"></script>

	<!-- Counter js  -->
	<script src="assets/plugins/countdown/js/waypoints.min.js"></script>
	<script src="assets/plugins/countdown/js/jquery.counterup.js"></script>

	<!-- custom js -->
	<script type="text/javascript" src="assets/pages/dashboard/custom-dashboard.js"></script>
	<script type="text/javascript" src="assets/js/script.js"></script>

HTML Structure

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

    <title>Flat Able Admin</title>

   <!-- Favicon icon -->

   <!-- CSS -->

<div class="wrapper">

    <!-- Pre-Loader-->
    <div class="theme-loader"></div>

    <div id="pcoded" class="pcoded">

        <div class="pcoded-overlay-box"></div>

        <div class="pcoded-container navbar-wrapper">

            <!-- Header Top Menu-->
            <nav class="navbar header-navbar pcoded-header" header-theme="theme4">

            <!-- Sidebar chat start -->
            <div id="sidebar" class="users p-chat-user showChat">
                <!-- Rightside Menu item -->

        	<!-- Sidebar chat Window -->
            <div class="showChat_inner">

            <div class="pcoded-main-container">

                <div class="pcoded-wrapper">

                    <!-- left-side-menu -->
                    <nav class="pcoded-navbar" pcoded-header-position="relative">

                    <div class="pcoded-content">
                        <div class="pcoded-inner-content">

                            <!-- Main-body start -->
                            <div class="main-body">

                                <!-- Container-fluid starts -->
                                <div  class="page-wrapper">








<!-- Required Jqurey files-->