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 layout consists of four major parts:

  • Wrapper .wrapper. A div that wraps the whole site.
  • Main Header .main-header. Contains the logo and navbar.
  • Sidebar .sidebar-wrapper. Contains the user panel and sidebar menu.
  • Content .content-wrapper. Contains the page header and content.

Tip!

Use the blank example page located in pages/examples/blank.html to build your own pages.

A full layout example for a quick start

<!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="main-sidebar">
        <!-- 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="content-wrapper">
        <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>

Layout Options

AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added to the body tag to get the desired goal.

  • Fixed: use the class .fixed to get a fixed header and sidebar.
  • Collapsed Sidebar: use the class .collapsed-sidebar to have a collapsed sidebar upon loading.
  • Boxed Layout: use the class .layout-boxed to get a boxed layout that stretches only to 1024px.
  • Top Navigation use the class .layout-top-nav to remove the sidebar and have your links at the top navbar.

Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.

Skins

Add one of the following classes to the body tag to change the template's appearance.

  • skin-blue
  • skin-yellow
  • skin-purple
  • skin-green
  • skin-red
  • skin-black

Components

Reminder!

AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components that this documentation does not cover.

Main Header

The main header contains the logo and navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for the top nav layout.

Main Header Example 
<header class="main-header">
  <a href="../../index2.html" class="logo">
    <!-- LOGO -->
    AdminLTE
  </a>
  <!-- Header Navbar: style can be found in header.less -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <!-- Messages: style can be found in dropdown.less-->
        <li class="dropdown messages-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-envelope-o"></i>
            <span class="label label-success">4</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 4 messages</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li><!-- start message -->
                  <a href="#">
                    <div class="pull-left">
                      <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
                    </div>
                    <h4>
                      Sender Name
                      <small><i class="fa fa-clock-o"></i> 5 mins</small>
                    </h4>
                    <p>Message Excerpt</p>
                  </a>
                </li><!-- end message -->
                ...
              </ul>
            </li>
            <li class="footer"><a href="#">See All Messages</a></li>
          </ul>
        </li>
        <!-- Notifications: style can be found in dropdown.less -->
        <li class="dropdown notifications-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-bell-o"></i>
            <span class="label label-warning">10</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 10 notifications</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li>
                  <a href="#">
                    <i class="ion ion-ios-people info"></i> Notification title
                  </a>
                </li>
                ...
              </ul>
            </li>
            <li class="footer"><a href="#">View all</a></li>
          </ul>
        </li>
        <!-- Tasks: style can be found in dropdown.less -->
        <li class="dropdown tasks-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-flag-o"></i>
            <span class="label label-danger">9</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">You have 9 tasks</li>
            <li>
              <!-- inner menu: contains the actual data -->
              <ul class="menu">
                <li><!-- Task item -->
                  <a href="#">
                    <h3>
                      Design some buttons
                      <small class="pull-right">20%</small>
                    </h3>
                    <div class="progress xs">
                      <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                        <span class="sr-only">20% Complete</span>
                      </div>
                    </div>
                  </a>
                </li><!-- end task item -->
                ...
              </ul>
            </li>
            <li class="footer">
              <a href="#">View all tasks</a>
            </li>
          </ul>
        </li>
        <!-- User Account: style can be found in dropdown.less -->
        <li class="dropdown user user-menu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
            <span class="hidden-xs">Alexander Pierce</span>
          </a>
          <ul class="dropdown-menu">
            <!-- User image -->
            <li class="user-header">
              <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
              <p>
                Alexander Pierce - Web Developer
                <small>Member since Nov. 2012</small>
              </p>
            </li>
            <!-- Menu Body -->
            <li class="user-body">
              <div class="col-xs-4 text-center">
                <a href="#">Followers</a>
              </div>
              <div class="col-xs-4 text-center">
                <a href="#">Sales</a>
              </div>
              <div class="col-xs-4 text-center">
                <a href="#">Friends</a>
              </div>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
              <div class="pull-left">
                <a href="#" class="btn btn-default btn-flat">Profile</a>
              </div>
              <div class="pull-right">
                <a href="#" class="btn btn-default btn-flat">Sign out</a>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

Top Nav Layout. Main Header Example.

Reminder!

To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.

Top Nav Example 
<!-- header logo: style can be found in header.less -->
<header class="main-header">
  <!-- Logo -->
  <a href="../../index2.html" class="logo">AdminLTE</a>
  <nav class="navbar navbar-static-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <i class="fa fa-bars"></i>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</header>

Sidebar

The sidebar used in this page to the left provides an example of what your sidebar should like. Construction of a sidebar: 

<div class="main-sidebar">
  <!-- Inner sidebar -->
  <div class="sidebar">
    <!-- user panel (Optional) -->
    <div class="user-panel">
      <div class="pull-left image">
        <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
      </div>
      <div class="pull-left info">
        <p>User Name</p>

        <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
      </div>
    </div><!-- /.user-panel -->

    <!-- Search Form (Optional) -->
    <form action="#" method="get" class="sidebar-form">
      <div class="input-group">
        <input type="text" name="q" class="form-control" placeholder="Search..."/>
        <span class="input-group-btn">
          <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
        </span>
      </div>
    </form><!-- /.sidebar-form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Another Link</a></li>
      <li class="treeview">
        <a href="#">Second Level</a>
        <ul class="treeview-menu">
          <li><a href="#">Link in level 2</a></li>
          <li><a href="#">Link in level 2</a></li>
        </ul>
      </li>
    </ul><!-- /.sidebar-menu -->

  </div><!-- /.sidebar -->
</div><!-- /.main-sidebar -->

Box

The box component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.

Default Box Markup

Default Box Example

Label
The body of the box
The footer of the box 
<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title">Default Box Example</h3>
    <div class="box-tools pull-right">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="label label-primary">Label</span>
    </div><!-- /.box-tools -->
  </div><!-- /.box-header -->
  <div class="box-body">
    The body of the box
  </div><!-- /.box-body -->
  <div class="box-footer">
    The footer of the box
  </div><!-- box-footer -->
</div><!-- /.box -->

Box Variants

You can change the style of the box by adding any of the contextual classes.

Default Box Example

The body of the box

Primary Box Example

The body of the box

Info Box Example

The body of the box

Warning Box Example

The body of the box

Success Box Example

The body of the box

Danger Box Example

The body of the box 
<div class="box box-default">...</div>
<div class="box box-primary">...</div>
<div class="box box-info">...</div>
<div class="box box-warning">...</div>
<div class="box box-success">...</div>
<div class="box box-danger">...</div>

Solid Box

Solid Boxes are alternative ways to display boxes. They can be created by simply adding th box-solid class to the box component. You may also use contextual classes with you solid boxes.

Default Solid Box Example

The body of the box

Primary Solid Box Example

The body of the box

Info Solid Box Example

The body of the box

Warning Solid Box Example

The body of the box

Success Solid Box Example

The body of the box

Danger Solid Box Example

The body of the box 
<div class="box box-solid">...</div>
<div class="box box-solid box-primary">...</div>
<div class="box box-solid box-info">...</div>
<div class="box box-solid box-warning">...</div>
<div class="box box-solid box-success">...</div>
<div class="box box-solid box-danger">...</div>

Plugins

AdminLTE makes use of the following plugins. For documentation and/or updates, please visit the provided links.

Browser Support

AdminLTE supports the following browsers:

  • IE9+
  • FireFox (latest)
  • Safari (latest)
  • Chrome (latest)
  • Opera (latest)

Upgrade Guide

To upgrade from version 1.x to the lateset version, apply these changes to your HTML markup:

  1. The .wrapper div must be placed immediately after the body tag rather than after the header
  2. Change the .header div to .main-header <div class="main-header">
  3. Change the .right-side class to .content-wrapper <div class="content-wrapper">
  4. Change the .left-side class to .main-sidebar <div class="main-sidebar">
  5. In the navbar, change .navbar-right to .navbar-custom-menu <div class="navbar-custom-menu">

And you should be set to go!

FAQ

Can AdminLTE be used with Wordpress?

AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.

Is there an integration guide for PHP frameworks such as Yii or Symphony?

Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.

How do I get notified of new AdminLTE versions?

The best option is to subscribe to our mailing list using the subscription form on Almsaeed Studio. If that's not appealing to you, you may watch the repository on Github or visit Almsaeed Studio every now and then for updates and announcements.

License

AdminLTE

AdminLTE is an open source project that is licensed under the MIT license. This allows you to do pretty much anything you want with it except selling it without any major modifications. Attribution is not required (though very much appreciated).

AdminLTE Premium Collection

AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use the premium collection, you must buy a license that fits your use case. The following is the set of available licenses:

Single Application License

  • Your use of the item is restricted to a single installation.
  • You may use the item in work which you are creating for your own purposes or for your client.
  • You must not incorporate the item in a work which is created for redistribution or resale by you or your client.
  • The item may not be redistributed or resold.
  • If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  • If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).

Multiple Applications License

  • Your use of the item may extend to multiple installations.
  • You may use the item in work which you are creating for your own purposes or for your clients.
  • You must not incorporate the item in a work which is created for redistribution or resale by you or your clients.
  • The item may not be redistributed or resold.
  • If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  • If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).

Extended License

This license must be purchased if you intend to license, sublicense, redistribute, or resell the final product.

  • Your use of the item may extend to multiple installations.
  • You may use the item in work which you are creating for your own purposes or for your clients.
  • You may license, sublicense, redistribute, or resell the item in the following circumstances:
  • The item is incorporated into a larger work you have created; or
  • If you modify the item and resell the end product.
  • If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
  • If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).