AdminLTE Documentation Current version 2.0

  1. Home
  2. Documentation

Introduction

AdminLTE is a popular open source WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. AdminLTE is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Download

AdminLTE can be downloaded in two different versions, each appealing to different skill levels and use case.

Ready

Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.

Download

Source Code

All files including the compiled CSS. Download this version if you plan on customizing the template. Requires a LESS compiler.

Download 
File Hierarchy of the Source Code Package

AdminLTE/
├── dist/
│   ├── CSS/
│   ├── JS
│   ├── img
├── build/
│   ├── less/
│   │   ├── AdminLTE's Less files
│   └── Bootstrap-less/ (Only for reference. No modifications have been made)
│       ├── mixins/
│       ├── variables.less
│       ├── mixins.less
└── plugins/
    ├── All the customized plugins CSS and JS files

Dependencies

AdminLTE depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them.

A Word of Advice

Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:

  • AdminLTE is based on Bootstrap 3. If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of AdminLTE and provide a consistent look throughout the template. This way, we guarantee you will get the best of AdminLTE.
  • 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.
  • Documentation. We are trying our best to make your experience with AdminLTE be smooth. One way to achieve that is to provide documentation and support. If you think that something is missing from the documentation, please do not hesitate to create an issue to tell us about it. Also, if you would like to contribute, email the support team at support@almsaeedstudio.com.
  • Built with LESS. This theme uses the LESS compiler to make it easier to customize and use. LESS is easy to learn if you know css or SASS. It is not necessary to learn LESS but it will benefit you a lot in the future.
  • Hosted on GitHub. Visit our GitHub repository to view issues, make requests, or contribute to the project.

Note: LESS files are better commented than the compiled css file.

Layout

The first thing that you probably want to do is understanding the layout of AdminLTE. The layout consists of four major parts:

  • Wrapper .wrapper
  • Main Header .main-header
  • Sidebar .left-side
  • Content .right-side
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.1 loaded from CDN. You can add you own bootstrap copy -->
    <!-- AdminLTE won't work without loading Bootstrap first -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- FontAwesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- ADMINLTE MAIN CSS FILE -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="skin-blue">
    <!-- Site wrapper -->
    <div class="wrapper">
      <!-- header logo: style can be found in header.less -->
      <header class="main-header">
        <a href="../../index2.html" class="logo">
          <!-- LOGO -->
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">

        </nav>
      </header>

      <!-- =============================================== -->

      <!-- Left side column. contains the sidebar -->
      <aside class="left-side">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- =============================================== -->

      <!-- Right side column. Contains the content of the page -->
      <div class="right-side">
        <section class="content-header">
          <!-- Page title and breadcrumbs go here -->
        </section><!-- /.content-header -->

        <!-- Main content -->
        <section class="content">

        </section><!-- /.content -->
      </div><!-- /.right-side -->

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> 2.0
        </div>
        <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
    </div><!-- ./wrapper -->

    <!-- jQuery 2.1.1: both Bootstrap and AdminLTE dependent on jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- AdminLTE App. Required in all pages -->
    <script src="../../js/AdminLTE/app.js" type="text/javascript"></script>
  </body>
</html>

Components

Browser Support

Text will go here

FAQ

Text will go here