Replace labels with tags according to BS4 implementation

build/js/dist/Layout.js

@@ -77,8 +77,10 @@ var Layout = function ($) {
       value: function _init() {
         var _this = this;
 
+        // Enable transitions
         $('body').removeClass(ClassName.HOLD);
 
+        // Activate layout height watcher
         this.fixLayoutHeight();
         $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', function () {
           _this.fixLayoutHeight();
@@ -90,6 +92,7 @@ var Layout = function ($) {
     }, {
       key: '_max',
       value: function _max(numbers) {
+        // Calculate the maximum number in a list
         var max = 0;
 
         numbers.forEach(function (v) {

build/js/src/AdminLTE.js

@@ -68,8 +68,10 @@ const Layout = (($) => {
     // Private
 
     _init() {
+      // Enable transitions
       $('body').removeClass(ClassName.HOLD)
 
+      // Activate layout height watcher
       this.fixLayoutHeight()
       $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
         this.fixLayoutHeight()
@@ -80,6 +82,7 @@ const Layout = (($) => {
     }
 
     _max(numbers) {
+      // Calculate the maximum number in a list
       let max = 0
 
       numbers.forEach((v) => {
@@ -91,6 +94,7 @@ const Layout = (($) => {
       return max
     }
 
+
     // Static
 
     static _jQueryInterface(operation) {
@@ -431,3 +435,132 @@ const Widget = (($) => {
   return Widget
 
 })(jQuery)
+
+const ControlSidebar = (($) => {
+  'use strict'
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'ControlSidebar'
+  const DATA_KEY           = 'lte.control.sidebar'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  const DATA_API_KEY       = '.data-api'
+
+  const Event = {
+    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+  }
+
+  const Selector = {
+    CONTROL_SIDEBAR: '.control-sidebar',
+    DATA_TOGGLE    : '[data-widget="control-sidebar"]'
+  }
+
+  const ClassName = {
+    CONTROL_SIDEBAR_OPEN : 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+  }
+
+  const Default = {
+    slide: true
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class ControlSidebar {
+
+    constructor(element, config) {
+      this._element = element
+      this._config  = this._getConfig(config);
+    }
+
+    // Public
+
+    show() {
+      console.log('showing', this._config.slide)
+      // Show the control sidebar
+      if (this._config.slide) {
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      } else {
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
+      }
+    }
+
+    collapse() {
+      // Collapse the control sidebar
+      if (this._config.slide) {
+        $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      } else {
+        $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
+      }
+    }
+
+    toggle() {
+      if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+        // Open the control sidebar
+        this.show()
+      } else {
+        // Close the control sidebar
+        this.collapse()
+      }
+    }
+
+    // Private
+
+    _getConfig(config) {
+      return $.extend({}, Default, config)
+    }
+
+    // Static
+
+    static _jQueryInterface(operation) {
+      return this.each(function () {
+        let data = $(this).data(DATA_KEY)
+
+        if (!data) {
+          data = new ControlSidebar(this, $(this).data())
+          $(this).data(DATA_KEY, data)
+        }
+
+        if(data[operation] === undefined) {
+          throw new Error(`${operation} is not a function`)
+        }
+
+        data[operation]();
+      })
+    }
+  }
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    event.preventDefault()
+
+    ControlSidebar._jQueryInterface.call($(this), 'toggle')
+  })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = ControlSidebar._jQueryInterface
+  $.fn[NAME].Constructor = ControlSidebar
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return ControlSidebar._jQueryInterface
+  }
+
+  return ControlSidebar
+
+})(jQuery)

build/js/src/Layout.js

@@ -69,8 +69,10 @@ const Layout = (($) => {
     // Private
 
     _init() {
+      // Enable transitions
       $('body').removeClass(ClassName.HOLD)
 
+      // Activate layout height watcher
       this.fixLayoutHeight()
       $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
         this.fixLayoutHeight()
@@ -81,6 +83,7 @@ const Layout = (($) => {
     }
 
     _max(numbers) {
+      // Calculate the maximum number in a list
       let max = 0
 
       numbers.forEach((v) => {
@@ -92,6 +95,7 @@ const Layout = (($) => {
       return max
     }
 
+
     // Static
 
     static _jQueryInterface(operation) {

build/scss/_bootstrap_variables.scss

@@ -105,7 +105,7 @@ $border-width: 1px !default;
 // Settings for the `<body>` element.
 
 $body-bg:    #fff !default;
-$body-color: $gray-dark !default;
+$body-color: $gray !default;
 
 
 // Links
@@ -467,7 +467,7 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
-$dropdown-item-padding-x:        0.5rem !default;
+$dropdown-item-padding-x:        1rem !default;
 
 $dropdown-header-color:          $gray-light !default;
 
@@ -523,7 +523,7 @@ $nav-tabs-border-width:                       $border-width !default;
 $nav-tabs-border-radius:                      $border-radius !default;
 $nav-tabs-link-hover-border-color:            $gray-lighter !default;
 $nav-tabs-active-link-hover-color:            $gray !default;
-$nav-tabs-active-link-hover-bg:               $body-bg !default;
+$nav-tabs-active-link-hover-bg:               transparent !default;
 $nav-tabs-active-link-hover-border-color:     #ddd !default;
 $nav-tabs-justified-link-border-color:        #ddd !default;
 $nav-tabs-justified-active-link-border-color: $body-bg !default;

build/scss/_control-sidebar.scss

@@ -1,290 +1,135 @@
 /*
  * Component: Control sidebar. By default, this is the right sidebar.
  */
-//The sidebar's background control class
-//This is a hack to make the background visible while scrolling
-.control-sidebar-bg {
-  position: fixed;
-  z-index: 820;
-  bottom: 0;
-}
 
-//Transitions
-.control-sidebar-bg,
-.control-sidebar {
-  top: 0;
-  bottom: 0;
-  right: -$control-sidebar-width;
-  width: $control-sidebar-width;
-  transition: right $transition-speed ease-in-out
-}
-
-//The sidebar
 .control-sidebar {
   position: absolute;
-  padding-top: $main-header-height;
   z-index: 830;
-  height: 100%;
-  overflow: auto;
-  //Tab panes
-  > .tab-content {
-    padding: 10px 15px;
-  }
-  //Open state with slide over content effect
-  &.control-sidebar-open {
+
   &,
-    + .control-sidebar-bg {
-      right: 0;
+  &:before {
+    width: $control-sidebar-width;
+    top: $main-header-height;
+    right: -$control-sidebar-width;
+    bottom: 0;
+    @include transition(right $transition-speed $transition-fn);
   }
+
+  &:before {
+    display: block;
+    position: fixed;
+    content: " ";
+    z-index: -1;
   }
 }
 
-//Open without slide over content
+// Control sidebar open state
 .control-sidebar-open {
-  .control-sidebar-bg,
   .control-sidebar {
+    &,
+    &:before {
       right: 0;
     }
-  @media (min-width: map-get($grid-breakpoints, sm)) {
-    .content-wrapper {
+  }
+
+  .content-wrapper,
+  .main-footer {
     margin-right: $control-sidebar-width;
   }
 }
-}
 
-//Control sidebar tabs
-.nav-tabs.control-sidebar-tabs {
-  //display: table;
-  //width: 100%;
-  > .nav-item {
-    //display: table-cell;
-    //width: auto;
-    &:first-of-type > .nav-link {
+// Control sidebar slide over content state
+.control-sidebar-slide-open {
+  .control-sidebar {
     &,
-      &:hover,
-      &:focus {
-        border-left-width: 0;
+    &:before {
+      right: 0;
     }
   }
-    > .nav-link {
-      @include border-radius(0);
-
-      //Hover and active states
-      &,
-      &:hover {
-        border-top: none;
-        border-right: none;
-        border-left: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-      }
-      .icon {
-        font-size: 16px;
-      }
-    }
-    //Active state
-    &.active {
-      > .nav-link {
-        &,
-        &:hover,
-        &:focus,
-        &:active {
-          border-top: none;
-          border-right: none;
-          border-bottom: none;
-        }
-      }
-    }
-  }
-  //Remove responsiveness on small screens
-  @media (max-width: map-get($grid-breakpoints, md)) {
-    display: table;
-    > li {
-      display: table-cell;
-    }
-  }
-}
-
-//Headings in the sidebar content
-.control-sidebar-heading {
-  font-weight: 400;
-  font-size: 16px;
-  padding: 10px 0;
-  margin-bottom: 10px;
-}
-
-//Subheadings
-.control-sidebar-subheading {
-  display: block;
-  font-weight: 400;
-  font-size: 14px;
-}
-
-//Control Sidebar Menu
-.control-sidebar-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0 -15px;
-  > li > a {
-    @include clearfix();
-    display: block;
-    padding: 10px 15px;
-    > .control-sidebar-subheading {
-      margin-top: 0;
-    }
-  }
-  .menu-icon {
-    float: left;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 35px;
-  }
-  .menu-info {
-    margin-left: 45px;
-    margin-top: 3px;
-    > .control-sidebar-subheading {
-      margin: 0;
-    }
-    > p {
-      margin: 0;
-      font-size: 11px;
-    }
-  }
-  .progress {
-    margin: 0;
-  }
 }
 
 // Dark skin
 .control-sidebar-dark {
+  &,
+  a,
+  .nav-link {
     color: $sidebar-dark-color;
+  }
+
   //  Background
   &,
-  + .control-sidebar-bg {
+  &:before {
     background: $sidebar-dark-bg;
   }
-  // Sidebar tabs
-  .nav-tabs.control-sidebar-tabs {
-    border-bottom: darken($sidebar-dark-bg, 3%);
-    > li {
-      > a {
-        background: darken($sidebar-dark-bg, 5%);
-        color: $sidebar-dark-color;
-        //Hover and active states
+
+  a:hover {
+    color: $sidebar-dark-hover-color;
+  }
+
+  // Headers
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  label {
+    color: $sidebar-dark-hover-color;
+  }
+
+  // Tabs
+  .nav-tabs {
+    border-bottom: 0;
+    background-color: $sidebar-dark-submenu-bg;
+    margin-bottom: 5px;
+
+    .nav-item {
+      margin: 0;
+    }
+
+    .nav-link {
+      position: relative;
+      border-radius: 0;
+      text-align: center;
+      padding: 10px 20px;
+
       &,
       &:hover,
-        &:focus {
-          border-left-color: darken($sidebar-dark-bg, 7%);
-          border-bottom-color: darken($sidebar-dark-bg, 7%);
-        }
-        &:hover,
+      &:active,
       &:focus,
-        &:active {
-          background: darken($sidebar-dark-bg, 3%);
-        }
-        &:hover {
-          color: #fff;
-        }
-      }
-      //Active state
       &.active {
-        > a {
-          &,
+        border: 0;
+      }
+
       &:hover,
+      &:active,
       &:focus,
-          &:active {
-            background: $sidebar-dark-bg;
-            color: #fff;
-          }
-        }
-      }
-    }
-  }
-  //Heading & subheading
-  .control-sidebar-heading,
-  .control-sidebar-subheading {
-    color: #fff;
-  }
-  //Sidebar list
-  .control-sidebar-menu {
-    > li {
-      > a {
-        &:hover {
-          background: $sidebar-dark-hover-bg;
-        }
-        .menu-info {
-          > p {
-            color: $sidebar-dark-color;
-          }
+      &.active {
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+        border-top-color: transparent;
+        color: $sidebar-dark-hover-color;
+      }
+
+      &.active {
+        background-color: $sidebar-dark-bg;
       }
     }
   }
+
+  .tab-pane {
+    padding: 10px 15px;
   }
 }
 
 // Light skin
 .control-sidebar-light {
   color: lighten($sidebar-light-color, 10%);
+
   //  Background
   &,
-  + .control-sidebar-bg {
+  &:before {
     background: $sidebar-light-bg;
     border-left: 1px solid $gray;
   }
-  // Sidebar tabs
-  .nav-tabs.control-sidebar-tabs {
-    border-bottom: $gray;
-    > li {
-      > a {
-        background: darken($sidebar-light-bg, 5%);
-        color: $sidebar-light-color;
-        //Hover and active states
-        &,
-        &:hover,
-        &:focus {
-          border-left-color: $gray;
-          border-bottom-color: $gray;
-        }
-        &:hover,
-        &:focus,
-        &:active {
-          background: darken($sidebar-light-bg, 3%);
-        }
-      }
-      //Active state
-      &.active {
-        > a {
-          &,
-          &:hover,
-          &:focus,
-          &:active {
-            background: $sidebar-light-bg;
-            color: #111;
-          }
-        }
-      }
-    }
-  }
-  //Heading & subheading
-  .control-sidebar-heading,
-  .control-sidebar-subheading {
-    color: #111;
-  }
-  //Sidebar list
-  .control-sidebar-menu {
-    margin-left: -14px;
-    > li {
-      > a {
-        &:hover {
-          background: $sidebar-light-hover-bg;
-        }
-        .menu-info {
-          > p {
-            color: lighten($sidebar-light-color, 10%);
-          }
-        }
-      }
-    }
-  }
 }

build/scss/_dropdown.scss

@@ -3,14 +3,53 @@
  * -------------------------
  */
 
-.dropdown-menu-lg {
-  min-width: 230px;
-  .dropdown-footer {
-    text-align: center;
-    display: block;
+// General Dropdown Rules
+.dropdown-item {
+  &:first-of-type {
+    @include border-top-radius($border-radius);
+  }
+  &:last-of-type {
+    @include border-bottom-radius($border-radius);
   }
 }
 
+.dropdown-item-title {
+  font-size: $font-size-base;
+  margin: 0;
+}
+
+// Dropdown Sizes
+.dropdown-menu-lg {
+  min-width: 280px;
+  max-width: 300px;
+  padding: 0;
+  .dropdown-divider {
+    margin: 0;
+  }
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+  p {
+    white-space: normal;
+    margin: 0;
+  }
+}
+
+// Dropdown header and footer
+.dropdown-footer,
+.dropdown-header {
+  text-align: center;
+  display: block;
+  padding: .5rem $dropdown-item-padding-x;
+  font-size: $font-size-sm;
+}
+
+.dropdown-header {
+  &:hover {
+    background-color: #fff;
+    color: $gray-light;
+  }
+}
 
 /* Add fade animation to dropdown menus by appending
  the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/

build/scss/_forms.scss

@@ -54,6 +54,24 @@
       box-shadow: none;
     }
   }
+
+  &.has-icon {
+    position: relative;
+    .form-control {
+      padding-right: 35px;
+    }
+    .form-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 3px;
+      top: 0;
+      padding: $input-padding-y $input-padding-x;
+      margin-top: -3px;
+      border: 0;
+      background-color: transparent;
+      font-size: 1rem;
+    }
+  }
 }
 
 /* Input group */

build/scss/_header.scss

@@ -12,6 +12,7 @@
     background: darken($brand-primary, 5%);
     transition: width $transition-speed $transition-fn;
     overflow: hidden;
+    margin-right: 0;
 
     > .logo-mini {
       display: none;
@@ -28,6 +29,7 @@
         }
       }
     }
+
     @include media-breakpoint-down(md) {
       width: $sidebar-mini-width;
       > .logo {
@@ -39,8 +41,18 @@
     }
   }
 
+  .navbar-nav .nav-item {
+    margin: 0;
+  }
+
   .nav-link {
     padding: $main-header-link-padding-y $main-header-link-padding-x;
+    position: relative;
+  }
+
+  .open > .nav-link,
+  .nav-link:hover {
+    background: rgba(#000, .1);
   }
 
   .has-img {
@@ -49,28 +61,35 @@
   }
 
   .navbar-nav[class*="-right"] {
-    .nav-item:first-of-type {
-      @media (max-width: breakpoint-max(md)) {
-        margin-left: 1rem;
-      }
-    }
     .dropdown-menu {
       margin-top: -3px;
       right: 0;
       left: auto;
-      @media (max-width: breakpoint-max(md)) {
+      @media (max-width: breakpoint-max(xs)) {
         left: 0;
         right: auto;
       }
     }
   }
+
 }
 
+// Add shadow to the navbar if wanted
 .navbar-shadow {
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
+  @include box-shadow(0 3px 3px rgba(0, 0, 0, 0.1));
 }
 
+// Add this class to images within a nav-link
 .navbar-img {
   height: $main-header-height / 2;
   width: auto;
 }
+
+// Navbar tags (used as badges in nav-link)
+.navbar-tag {
+  position: absolute;
+  top: 9px;
+  right: 5px;
+  font-size: $font-size-xs - .1;
+  padding: 2px 4px;
+}

build/scss/_layout.scss

@@ -2,11 +2,6 @@
  * Core: General Layout Style
  * -------------------------
  */
-html,
-body {
-  height: 100%;
-}
-
 html,
 body,
 .wrapper {
@@ -19,6 +14,8 @@ body,
 }
 
 .wrapper {
+  position: relative;
+
   .layout-boxed & {
     box-shadow: 0 0 10px rgba(0, 0, 0, .3);
     &,
@@ -47,9 +44,13 @@ body,
 .main-footer {
   margin-left: $sidebar-width;
   z-index: 3000;
+  $local-content-transition: margin-right $transition-speed $transition-fn, margin-left $transition-speed $transition-fn;
+  @include transition($local-content-transition);
+
   .sidebar-collapse & {
     margin-left: 0;
   }
+
   @media(max-width: breakpoint-max(md)) {
     &,
     &:before {
@@ -63,16 +64,6 @@ body,
   @include calc("min-height", "100% - #{$main-header-height + $main-footer-height}");
 }
 
-.content-wrapper,
-.main-footer,
-.main-sidebar,
-.main-sidebar {
-  &,
-  &:before {
-    @include transition(margin-left $transition-speed $transition-fn);
-  }
-}
-
 .content-wrapper {
   background: $main-bg;
   > .content-header,
@@ -91,7 +82,8 @@ body,
 
   &,
   &:before {
-    @include transition(width $transition-speed $transition-fn);
+    $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
+    @include transition($local-sidebar-transition);
     width: $sidebar-width;
   }
 
@@ -102,7 +94,7 @@ body,
     }
   }
 
-  @media(max-width: breakpoint-max(md)) {
+  @include media-breakpoint-down(md) {
     &,
     &:before {
       margin-left: -$sidebar-width;
@@ -120,7 +112,7 @@ body,
 .content-header {
   padding: 15px;
   background: #fff;
-  @include box-shadow(3px 0 6px rgba(0, 0, 0, 0.2));
+  border-bottom: 1px solid $card-border-color;
   h1 {
     font-size: 1.8rem;
     margin: 0;

build/scss/_miscellaneous.scss

@@ -360,7 +360,11 @@
 }
 
 .text-sm {
-  font-size: 12px;
+  font-size: $font-size-sm;
+}
+
+.text-xs {
+  font-size: $font-size-xs;
 }
 
 // _fix for sparkline tooltip
@@ -555,6 +559,51 @@
   @include border-radius(50%);
 }
 
+// Image sizes
+.img-size-64,
+.img-size-50,
+.img-size-32 {
+  height: auto;
+}
+
+.img-size-64 {
+  width: 64px;
+}
+
+.img-size-50 {
+  width: 50px;
+}
+
+.img-size-32 {
+  width: 32px;
+}
+
+// Block sizes
+.size-32,
+.size-40,
+.size-50 {
+  display: block;
+  text-align: center;
+}
+
+.size-32 {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.size-40 {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.size-50 {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
 //General attachemnt block
 .attachment-block {
   border: 1px solid $box-border-color;
@@ -617,3 +666,8 @@
     width: 100% !important;
   }
 }
+
+// Icons
+.icon-wide {
+  width: 30px;
+}

build/scss/_mixins.scss

@@ -193,28 +193,26 @@
       > .nav-link.active,
       > .nav-link:hover {
         color: $sidebar-dark-submenu-hover-color;
+        background: transparent;
       }
     }
   }
 
   // Sidebar form
   .sidebar-form {
-    margin: 5px 0;
     .form-control {
-      &::-webkit-input-placeholder,
-      &:-moz-placeholder,
-      &::-moz-placeholder,
-      &:-ms-input-placeholder {
-        color: red;
-      }
-      font-size: 14px;
-      background: $sidebar-dark-hover-bg;
+      background: $sidebar-dark-submenu-bg;
       border: 0;
+      &,
+      &:focus + .form-icon {
         color: $sidebar-dark-hover-color;
-      padding: 10px 10px;
-      &:focus {
-        background: lighten($sidebar-dark-bg, 3%);
       }
+      &:focus {
+        background: lighten($sidebar-dark-submenu-bg, 7%);
+      }
+    }
+    .form-icon {
+      color: $sidebar-dark-color;
     }
   }
 }

build/scss/_sidebar-mini.scss

@@ -33,6 +33,10 @@
       }
 
       .nav-sidebar {
+        > .nav-label {
+          border-bottom-right-radius: $border-radius;
+        }
+
         > .nav-item {
           position: relative;
           z-index: 999;
@@ -57,11 +61,12 @@
             > .nav-link {
               overflow: visible;
             }
+
             > .nav-link > .text,
             > .nav-treeview {
               display: block !important;
               position: absolute;
-              width: $sidebar-width - $sidebar-mini-width;
+              width: $sidebar-width - ($sidebar-mini-width/2);
               left: $sidebar-mini-width;
             }
 
@@ -71,7 +76,11 @@
               margin-left: -3px;
               padding: $nav-link-padding;
               background-color: inherit;
-              border-top-right-radius: $border-radius;
+              @include border-right-radius($border-radius);
+            }
+
+            &.has-treeview > .nav-link > .text {
+              border-bottom-right-radius: 0;
             }
 
             > .nav-treeview {
@@ -94,6 +103,11 @@
         display: none !important;
         -webkit-transform: translateZ(0);
       }
+
+      // Make an element visible only when sidebar mini is active
+      .visible-sidebar-mini {
+        display: block !important;
+      }
     }
   }
 }
@@ -105,6 +119,10 @@
   overflow: hidden;
 }
 
+.nav-sidebar .nav-link {
+  white-space: normal;
+}
+
 .nav-sidebar {
   position: relative;
   &:hover {
@@ -127,3 +145,8 @@
     margin-top: -7px;
   }
 }
+
+// Make an element visible only when sidebar mini is active
+.visible-sidebar-mini {
+  display: none !important;
+}

build/scss/_sidebar.scss

@@ -9,7 +9,8 @@
 
 //Sidebar user panel
 .user-panel {
-  padding: 10px 10px 0 10px;
+  padding: 10px;
+  margin-bottom: 6px;
 
   .image {
     float: left;
@@ -58,26 +59,20 @@
 .nav-sidebar {
   //First Level
   > .nav-item {
-    margin-bottom: 0;
+    margin-top: 0 !important;
 
     > .nav-link {
       @include border-radius(0);
       > .nav-icon {
-        width: 20px;
+        width: 26px;
       }
     }
 
-    .pull-right {
+    .float-xs-right {
       margin-top: 3px;
-      margin-right: 5px;
     }
   }
 
-  .nav-header {
-    padding: $nav-link-padding;
-    font-size: .9em;
-  }
-
   // All other levels
   .nav-link > .fa-angle-left {
     width: auto;
@@ -87,10 +82,6 @@
     margin-top: 3px;
   }
 
-  .nav-item > .nav-link.active {
-    font-weight: $display1-weight;
-  }
-
   .menu-open {
     > .nav-treeview {
       display: block;
@@ -117,11 +108,18 @@
       > .nav-link {
         padding: 5px 5px 5px 15px;
         display: block;
-        font-size: 14px;
         > .nav-icon {
-          width: 20px;
+          width: 30px;
         }
       }
     }
   }
+
+  .nav-header {
+    font-size: .9em;
+    padding: $nav-link-padding;
+    &:not(:first-of-type) {
+      padding: 1.7em 1em .5em 1em;
+    }
+  }
 }

build/scss/_variables.scss

@@ -40,7 +40,7 @@ $main-bg: $gray-lighter !default;
 // MAIN HEADER
 // --------------------------------------------------------
 $main-header-link-padding-y:  15px !default;
-$main-header-link-padding-x:  5px !default;
+$main-header-link-padding-x:  15px !default;
 $main-header-brand-padding-y: 12px !default;
 $main-header-brand-padding-x: $main-header-brand-padding-y !default;
 $main-header-height:          (($font-size-root * $line-height-base) + ($main-header-link-padding-y * 2)) !default;
@@ -57,7 +57,7 @@ $main-footer-height:           (($font-size-root * $line-height-base) + ($main-f
 
 // Dark sidebar
 $sidebar-dark-bg: #2c333c !default;//#222d32 !default;
-$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 2%) !default;
+$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 4%) !default;
 $sidebar-dark-color: #C2C7D0!default;//lighten($sidebar-dark-bg, 60%) !default;
 $sidebar-dark-hover-color: #fff !default;
 $sidebar-dark-submenu-bg: lighten($sidebar-dark-bg, 5%) !default;

dist/js/adminlte.js

@@ -76,8 +76,10 @@ var Layout = function ($) {
       value: function _init() {
         var _this = this;
 
+        // Enable transitions
         $('body').removeClass(ClassName.HOLD);
 
+        // Activate layout height watcher
         this.fixLayoutHeight();
         $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', function () {
           _this.fixLayoutHeight();
@@ -89,6 +91,7 @@ var Layout = function ($) {
     }, {
       key: '_max',
       value: function _max(numbers) {
+        // Calculate the maximum number in a list
         var max = 0;
 
         numbers.forEach(function (v) {
@@ -472,4 +475,144 @@ var Widget = function ($) {
 
   return Widget;
 }(jQuery);
+
+var ControlSidebar = function ($) {
+  'use strict';
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  var NAME = 'ControlSidebar';
+  var DATA_KEY = 'lte.control.sidebar';
+  var EVENT_KEY = '.' + DATA_KEY;
+  var JQUERY_NO_CONFLICT = $.fn[NAME];
+  var DATA_API_KEY = '.data-api';
+
+  var Event = {
+    CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
+  };
+
+  var Selector = {
+    CONTROL_SIDEBAR: '.control-sidebar',
+    DATA_TOGGLE: '[data-widget="control-sidebar"]'
+  };
+
+  var ClassName = {
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+  };
+
+  var Default = {
+    slide: true
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  var ControlSidebar = function () {
+    function ControlSidebar(element, config) {
+      _classCallCheck(this, ControlSidebar);
+
+      this._element = element;
+      this._config = this._getConfig(config);
+    }
+
+    // Public
+
+    _createClass(ControlSidebar, [{
+      key: 'show',
+      value: function show() {
+        console.log('showing', this._config.slide);
+        // Show the control sidebar
+        if (this._config.slide) {
+          $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+        } else {
+          $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN);
+        }
+      }
+    }, {
+      key: 'collapse',
+      value: function collapse() {
+        // Collapse the control sidebar
+        if (this._config.slide) {
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+        } else {
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN);
+        }
+      }
+    }, {
+      key: 'toggle',
+      value: function toggle() {
+        if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+          // Open the control sidebar
+          this.show();
+        } else {
+          // Close the control sidebar
+          this.collapse();
+        }
+      }
+
+      // Private
+
+    }, {
+      key: '_getConfig',
+      value: function _getConfig(config) {
+        return $.extend({}, Default, config);
+      }
+
+      // Static
+
+    }], [{
+      key: '_jQueryInterface',
+      value: function _jQueryInterface(operation) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          if (!data) {
+            data = new ControlSidebar(this, $(this).data());
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (data[operation] === undefined) {
+            throw new Error(operation + ' is not a function');
+          }
+
+          data[operation]();
+        });
+      }
+    }]);
+
+    return ControlSidebar;
+  }();
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    event.preventDefault();
+
+    ControlSidebar._jQueryInterface.call($(this), 'toggle');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = ControlSidebar._jQueryInterface;
+  $.fn[NAME].Constructor = ControlSidebar;
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT;
+    return ControlSidebar._jQueryInterface;
+  };
+
+  return ControlSidebar;
+}(jQuery);
 //# sourceMappingURL=adminlte.js.map

dist/js/app.js

@@ -8,5 +8,5 @@
   'use strict';
 
   // Activate the layout manager
-  $(document).Layout();
+  $('body').Layout();
 }(jQuery));

dist/js/app.min.js

@@ -4,4 +4,4 @@
  * Homepage  Almsaeed Studio <https://almsaeedstudio.com>
  * License   MIT <https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE>
  */
-!function(a){"use strict";a(document).Layout()}(jQuery);
+!function(a){"use strict";a("body").Layout()}(jQuery);

dist/js/demo.js

@@ -50,56 +50,56 @@
 
   //Layout options
   demo_settings.append(
-      "<h4 class='control-sidebar-heading'>"
+      "<h5 class='control-sidebar-heading'>"
       + "Layout Options"
-      + "</h4>"
+      + "</h5>"
         //Fixed layout
-      + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
+      + "<div class='form-check'>"
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='fixed' class='form-check-input float-xs-right'/> "
       + "Fixed layout"
       + "</label>"
-      + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
+      + "<small class='form-text'>Activate the fixed layout. You can't use fixed and boxed layouts together</small>"
       + "</div>"
         //Boxed layout
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='layout-boxed'class='float-xs-right'/> "
       + "Boxed Layout"
       + "</label>"
-      + "<p>Activate the boxed layout</p>"
+      + "<small class='form-text'>Activate the boxed layout</small>"
       + "</div>"
         //Sidebar Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='sidebar-collapse' class='float-xs-right'/> "
       + "Toggle Sidebar"
       + "</label>"
-      + "<p>Toggle the left sidebar's state (open or collapse)</p>"
+      + "<small class='form-text'>Toggle the left sidebar's state (open or collapse)</small>"
       + "</div>"
         //Sidebar mini expand on hover toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-enable='expandOnHover' class='float-xs-right'/> "
       + "Sidebar Expand on Hover"
       + "</label>"
-      + "<p>Let the sidebar mini expand on hover</p>"
+      + "<small class='form-text'>Let the sidebar mini expand on hover</small>"
       + "</div>"
         //Control Sidebar Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='float-xs-right'/> "
       + "Toggle Right Sidebar Slide"
       + "</label>"
-      + "<p>Toggle between slide over content and push content effects</p>"
+      + "<small class='form-text'>Toggle between slide over content and push content effects</small>"
       + "</div>"
         //Control Sidebar Skin Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-sidebarskin='toggle' class='float-xs-right'/> "
       + "Toggle Right Sidebar Skin"
       + "</label>"
-      + "<p>Toggle between dark and light skins for the right sidebar</p>"
+      + "<small class='form-text'>Toggle between dark and light skins for the right sidebar</small>"
       + "</div>"
   );
   var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
@@ -204,7 +204,7 @@
           + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
   skins_list.append(skin_yellow_light);
 
-  demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
+  demo_settings.append("<h5 class='control-sidebar-heading'>Skins</h5>");
   demo_settings.append(skins_list);
 
   tab_pane.append(demo_settings);

documentation/build/include/components.html

@@ -40,7 +40,7 @@
               <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>
+                  <span class="tag tag-success">4</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 4 messages</li>
@@ -68,7 +68,7 @@
               <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>
+                  <span class="tag tag-warning">10</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 10 notifications</li>
@@ -89,7 +89,7 @@
               <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>
+                  <span class="tag tag-danger">9</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 9 tasks</li>
@@ -174,7 +174,7 @@
         &LT;li class="dropdown messages-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-envelope-o">&LT;/i>
-            &LT;span class="label label-success">4&LT;/span>
+            &LT;span class="tag tag-success">4&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 4 messages&LT;/li>
@@ -203,7 +203,7 @@
         &LT;li class="dropdown notifications-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-bell-o">&LT;/i>
-            &LT;span class="label label-warning">10&LT;/span>
+            &LT;span class="tag tag-warning">10&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 10 notifications&LT;/li>
@@ -225,7 +225,7 @@
         &LT;li class="dropdown tasks-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-flag-o">&LT;/i>
-            &LT;span class="label label-danger">9&LT;/span>
+            &LT;span class="tag tag-danger">9&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 9 tasks&LT;/li>
@@ -449,8 +449,8 @@
       &LT;li class="treeview">
         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
         &LT;ul class="treeview-menu">
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
         &LT;/ul>
       &LT;/li>
     &LT;/ul>&LT;!-- /.sidebar-menu -->
@@ -640,7 +640,7 @@
       <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>
+        <span class="tag tag-primary">Label</span>
       </div><!-- /.box-tools -->
     </div><!-- /.box-header -->
     <div class="box-body">
@@ -656,7 +656,7 @@
     &LT;div class="box-tools pull-right">
       &LT;!-- Buttons, labels, and many other things can be placed here! -->
       &LT;!-- Here is a label for example -->
-      &LT;span class="label label-primary">Label&LT;/span>
+      &LT;span class="tag tag-primary">Label&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">
@@ -906,7 +906,7 @@
         <div class="box-header with-border">
           <h3 class="box-title">Labels</h3>
           <div class="box-tools pull-right">
-            <span class="label label-default">Some Label</span>
+            <span class="tag tag-default">Some Label</span>
           </div><!-- /.box-tools -->
         </div><!-- /.box-header -->
         <div class="box-body">
@@ -918,7 +918,7 @@
   &LT;div class="box-header with-border">
     &LT;h3 class="box-title">Labels&LT;/h3>
     &LT;div class="box-tools pull-right">
-      &LT;span class="label label-default">8 New Messages&LT;/span>
+      &LT;span class="tag tag-default">8 New Messages&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">

documentation/build/include/download.html

@@ -8,7 +8,7 @@
       <div class="box box-primary">
         <div class="box-header with-border">
           <h3 class="box-title">Ready</h3>
-          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
+          <span class="tag tag-primary pull-right"><i class="fa fa-html5"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
@@ -20,7 +20,7 @@
       <div class="box box-danger">
         <div class="box-header with-border">
           <h3 class="box-title">Source Code</h3>
-          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
+          <span class="tag tag-danger pull-right"><i class="fa fa-database"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>

documentation/index.html

@@ -129,7 +129,7 @@
       <div class="box box-primary">
         <div class="box-header with-border">
           <h3 class="box-title">Ready</h3>
-          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
+          <span class="tag tag-primary pull-right"><i class="fa fa-html5"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
@@ -141,7 +141,7 @@
       <div class="box box-danger">
         <div class="box-header with-border">
           <h3 class="box-title">Source Code</h3>
-          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
+          <span class="tag tag-danger pull-right"><i class="fa fa-database"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>
@@ -471,7 +471,7 @@ AdminLTE/
               <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>
+                  <span class="tag tag-success">4</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 4 messages</li>
@@ -499,7 +499,7 @@ AdminLTE/
               <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>
+                  <span class="tag tag-warning">10</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 10 notifications</li>
@@ -520,7 +520,7 @@ AdminLTE/
               <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>
+                  <span class="tag tag-danger">9</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 9 tasks</li>
@@ -605,7 +605,7 @@ AdminLTE/
         &LT;li class="dropdown messages-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-envelope-o">&LT;/i>
-            &LT;span class="label label-success">4&LT;/span>
+            &LT;span class="tag tag-success">4&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 4 messages&LT;/li>
@@ -634,7 +634,7 @@ AdminLTE/
         &LT;li class="dropdown notifications-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-bell-o">&LT;/i>
-            &LT;span class="label label-warning">10&LT;/span>
+            &LT;span class="tag tag-warning">10&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 10 notifications&LT;/li>
@@ -656,7 +656,7 @@ AdminLTE/
         &LT;li class="dropdown tasks-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-flag-o">&LT;/i>
-            &LT;span class="label label-danger">9&LT;/span>
+            &LT;span class="tag tag-danger">9&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 9 tasks&LT;/li>
@@ -880,8 +880,8 @@ AdminLTE/
       &LT;li class="treeview">
         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
         &LT;ul class="treeview-menu">
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
         &LT;/ul>
       &LT;/li>
     &LT;/ul>&LT;!-- /.sidebar-menu -->
@@ -1071,7 +1071,7 @@ AdminLTE/
       <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>
+        <span class="tag tag-primary">Label</span>
       </div><!-- /.box-tools -->
     </div><!-- /.box-header -->
     <div class="box-body">
@@ -1087,7 +1087,7 @@ AdminLTE/
     &LT;div class="box-tools pull-right">
       &LT;!-- Buttons, labels, and many other things can be placed here! -->
       &LT;!-- Here is a label for example -->
-      &LT;span class="label label-primary">Label&LT;/span>
+      &LT;span class="tag tag-primary">Label&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">
@@ -1337,7 +1337,7 @@ AdminLTE/
         <div class="box-header with-border">
           <h3 class="box-title">Labels</h3>
           <div class="box-tools pull-right">
-            <span class="label label-default">Some Label</span>
+            <span class="tag tag-default">Some Label</span>
           </div><!-- /.box-tools -->
         </div><!-- /.box-header -->
         <div class="box-body">
@@ -1349,7 +1349,7 @@ AdminLTE/
   &LT;div class="box-header with-border">
     &LT;h3 class="box-title">Labels&LT;/h3>
     &LT;div class="box-tools pull-right">
-      &LT;span class="label label-default">8 New Messages&LT;/span>
+      &LT;span class="tag tag-default">8 New Messages&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">

index.html

@@ -6,17 +6,12 @@
   <title>AdminLTE 2 | Dashboard</title>
   <!-- Tell the browser to be responsive to screen width -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-  <!-- Bootstrap 3.3.5 -->
-  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- Ionicons -->
   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
   <!-- Theme style -->
-  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
-  <!-- AdminLTE Skins. Choose a skin from the css/skins
-       folder instead of downloading all of them to reduce the load. -->
-  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
+  <link rel="stylesheet" href="dist/css/adminlte.min.css">
   <!-- iCheck -->
   <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
   <!-- Morris chart -->
@@ -40,446 +35,339 @@
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
 
-  <header class="main-header">
+  <!-- Navbar -->
+  <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
     <!-- Logo -->
-    <a href="index2.html" class="logo">
-      <!-- mini logo for sidebar mini 50x50 pixels -->
-      <span class="logo-mini"><b>A</b>LT</span>
-      <!-- logo for regular state and mobile devices -->
-      <span class="logo-lg"><b>Admin</b>LTE</span>
-    </a>
-    <!-- Header Navbar: style can be found in header.less -->
-    <nav class="navbar navbar-static-top" role="navigation">
-      <!-- Sidebar toggle button-->
-      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-        <span class="sr-only">Toggle navigation</span>
+    <a class="navbar-brand text-xs-center" href="#">
+      <span class="logo hidden-md-down"><b>Admin</b>LTE</span>
+      <span class="logo logo-mini"><b>A</b>LT</span>
     </a>
 
-      <div class="navbar-custom-menu">
+    <!-- Left navbar links -->
     <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>
-                        Support Team
-                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <!-- end message -->
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        AdminLTE Design Team
-                        <small><i class="fa fa-clock-o"></i> 2 hours</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Developers
-                        <small><i class="fa fa-clock-o"></i> Today</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Sales Department
-                        <small><i class="fa fa-clock-o"></i> Yesterday</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Reviewers
-                        <small><i class="fa fa-clock-o"></i> 2 days</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
       </li>
     </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="fa fa-users text-aqua"></i> 5 new members joined today
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
-                      page and may cause design problems
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-users text-red"></i> 5 new members joined
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-shopping-cart text-green"></i> 25 sales made
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-user text-red"></i> You changed your username
-                    </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 -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Create a nice theme
-                        <small class="pull-right">40%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">40% Complete</span>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <!-- end task item -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Some task I need to do
-                        <small class="pull-right">60%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">60% Complete</span>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <!-- end task item -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Make beautiful transitions
-                        <small class="pull-right">80%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">80% 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>
+    <div class="navbar-"></div>
+
+    <!-- Right navbar links -->
+    <ul class="nav navbar-nav float-sm-right">
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-comments-o"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">
+            <div class="media">
+              <div class="media-left">
+                <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              </div>
+              <div class="media-body">
+                <p class="no-margin">Lola Stockholm</p>
+                <p class="text-sm no-margin">What are you up to?</p>
+              </div>
+            </div>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <div class="media">
+              <div class="media-left">
+                <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              </div>
+              <div class="media-body">
+                <p class="no-margin">Lola Stockholm</p>
+                <p class="text-sm no-margin">What are you up to?</p>
+              </div>
+            </div>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-footer">See All Messages</a>
+        </div>
       </li>
-              <!-- Menu Body -->
-              <li class="user-body">
-                <div class="row">
-                  <div class="col-xs-4 text-center">
-                    <a href="#">Followers</a>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-bell-o"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">
+            Account
+          </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>
-                </div>
-                <!-- /.row -->
       </li>
-              <!-- Menu Footer-->
-              <li class="user-footer">
-                <div class="pull-left">
-                  <a href="#" class="btn btn-default btn-flat">Profile</a>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-search"></i></a>
+        <div class="dropdown-menu">
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Usage</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
         </div>
-                <div class="pull-right">
-                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-gears"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">Item</a>
         </div>
       </li>
     </ul>
-          </li>
-          <!-- Control Sidebar Toggle Button -->
-          <li>
-            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
-          </li>
-        </ul>
-      </div>
   </nav>
-  </header>
-  <!-- Left side column. contains the logo and sidebar -->
+  <!-- /.navbar -->
+
+  <!-- Main Sidebar Container -->
   <aside class="main-sidebar">
-    <!-- sidebar: style can be found in sidebar.less -->
-    <section class="sidebar">
-      <!-- Sidebar user panel -->
-      <div class="user-panel">
-        <div class="pull-left image">
-          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel clearfix">
+        <div class="image">
+          <img src="dist/img/user2-160x160.jpg" class="img-rounded" alt="User Image">
         </div>
-        <div class="pull-left info">
-          <p>Alexander Pierce</p>
-          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+        <div class="info">
+          <h6>Alexander Pierce</h6>
+          <!-- Status -->
+          <div class="dropdown">
+            <a href="#" data-toggle="dropdown" class="dropdown-toggle status btn btn-default btn-xs">Account</a>
+            <div class="dropdown-menu dropdown-menu-right">
+              <a class="dropdown-item" href="#">Profile</a>
+              <a class="dropdown-item" href="#">Settings</a>
+              <a class="dropdown-item" href="#">Logout</a>
             </div>
           </div>
-      <!-- search form -->
+        </div>
+      </div>
+
       <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>
+        <input type="search" name="q" class="form-control" placeholder="Search" data-widget="treeview-search" data-target="#searchable-treeview">
       </form>
-      <!-- /.search form -->
-      <!-- sidebar menu: : style can be found in sidebar.less -->
-      <ul class="sidebar-menu">
-        <li class="header">MAIN NAVIGATION</li>
-        <li class="active treeview">
-          <a href="#">
-            <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
-          </a>
-          <ul class="treeview-menu">
-            <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
-            <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
-          </ul>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-files-o"></i>
-            <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
-          </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
-            <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
-            <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
-            <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
-          </ul>
-        </li>
-        <li>
-          <a href="pages/widgets.html">
-            <i class="fa fa-th"></i> <span>Widgets</span>
-            <small class="label pull-right bg-green">new</small>
-          </a>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-pie-chart"></i>
-            <span>Charts</span>
+
+      <!-- Sidebar Menu -->
+      <nav>
+        <ul class="nav nav-pills nav-sidebar nav-stacked" id="searchable-treeview" data-widget="treeview" role="menu">
+          <li class="nav-header">Components</li>
+          <!-- Optionally, you can add icons to the links using the .nav-icon class
+               paired with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fa fa-dashboard"></i> <span class="text">Dashboard</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
-            <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
-            <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
-            <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="./index.html" class="nav-link active"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.1</a>
+              </li>
+              <li class="nav-item">
+                <a href="./index2.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.2</a>
+              </li>
+              <li class="nav-item">
+                <a href="./index3.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.3</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-laptop"></i>
-            <span>UI Elements</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-th"></i> <span class="text">Widgets</span> <span class="tag tag-danger float-xs-right">New</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-pie-chart"></i> <span class="text">Charts</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
-            <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
-            <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
-            <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
-            <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
-            <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> ChartJS</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Morris</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Flot</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inline</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-edit"></i> <span>Forms</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-tree"></i> <span class="text">UI Elements</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
-            <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
-            <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Icons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Buttons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Sliders</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-table"></i> <span>Tables</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-edit"></i> <span class="text">Forms</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
-            <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Advanced Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Editors</a>
+              </li>
             </ul>
           </li>
-        <li>
-          <a href="pages/calendar.html">
-            <i class="fa fa-calendar"></i> <span>Calendar</span>
-            <small class="label pull-right bg-red">3</small>
-          </a>
-        </li>
-        <li>
-          <a href="pages/mailbox/mailbox.html">
-            <i class="fa fa-envelope"></i> <span>Mailbox</span>
-            <small class="label pull-right bg-yellow">12</small>
-          </a>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-folder"></i> <span>Examples</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-table"></i> <span class="text">Tables</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
-            <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
-            <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
-            <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
-            <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
-            <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
-            <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
-            <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
-            <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Simple Tables</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Data Tables</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-share"></i> <span>Multilevel</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-calendar"></i> <span class="text">Calendar</span>
+              <span class="tag tag-info float-xs-right">2</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-envelope-o"></i> <span class="text">Mailbox</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-            <li>
-              <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
-              <ul class="treeview-menu">
-                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
-                <li>
-                  <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
-                  <ul class="treeview-menu">
-                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                  </ul>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inbox</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Compose</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Read</a>
               </li>
             </ul>
           </li>
-            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-book"></i> <span class="text">Pages</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Invoice</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Profile</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Login</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Register</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Lockscreen</a>
+              </li>
             </ul>
           </li>
-        <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
-        <li class="header">LABELS</li>
-        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
-        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
-        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-plus-square-o"></i> <span class="text">Extras</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 404</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 500</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Blank Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="starter.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Starter Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Pace Page</a>
+              </li>
             </ul>
-    </section>
+          </li>
+          <li class="nav-header">Miscellaneous</li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-sitemap"></i> <span class="text">Multilevel</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One</a></li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two</a></li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
+                    <ul class="nav nav-treeview">
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                    </ul><!-- Level 3 -->
+                  </li>
+                </ul><!-- Level 2 -->
+              </li>
+            </ul><!-- Level 1 -->
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-file"></i> <span class="text">Documentation</span>
+            </a>
+          </li>
+          <li class="nav-header">Labels</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-danger"></i> <span class="text">Important</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-warning"></i> <span class="text">Warning</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-info"></i> <span class="text">Informational</span></a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
     <!-- /.sidebar -->
   </aside>
 
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
     <!-- Content Header (Page header) -->
-    <section class="content-header">
-      <h1>
-        Dashboard
-        <small>Control panel</small>
-      </h1>
-      <ol class="breadcrumb">
-        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Dashboard</li>
+    <div class="content-header container-fluid">
+      <div class="row">
+        <div class="col-sm-6">
+          <h1>Dashboard</h1>
+        </div><!-- /.col -->
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="#">Home</a></li>
+            <li class="breadcrumb-item active">Dashboard</li>
           </ol>
-    </section>
+        </div><!-- /.col -->
+      </div><!-- /.row -->
+    </div>
+    <!-- /.content-header -->
 
     <!-- Main content -->
     <section class="content">
@@ -685,7 +573,7 @@
                   <!-- todo text -->
                   <span class="text">Design a nice theme</span>
                   <!-- Emphasis label -->
-                  <small class="label label-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
+                  <small class="tag tag-danger"><i class="fa fa-clock-o"></i> 2 mins</small>
                   <!-- General tools such as edit or delete-->
                   <div class="tools">
                     <i class="fa fa-edit"></i>
@@ -699,7 +587,7 @@
                       </span>
                   <input type="checkbox" value="" name="">
                   <span class="text">Make the theme responsive</span>
-                  <small class="label label-info"><i class="fa fa-clock-o"></i> 4 hours</small>
+                  <small class="tag tag-info"><i class="fa fa-clock-o"></i> 4 hours</small>
                   <div class="tools">
                     <i class="fa fa-edit"></i>
                     <i class="fa fa-trash-o"></i>
@@ -712,7 +600,7 @@
                       </span>
                   <input type="checkbox" value="" name="">
                   <span class="text">Let theme shine like a star</span>
-                  <small class="label label-warning"><i class="fa fa-clock-o"></i> 1 day</small>
+                  <small class="tag tag-warning"><i class="fa fa-clock-o"></i> 1 day</small>
                   <div class="tools">
                     <i class="fa fa-edit"></i>
                     <i class="fa fa-trash-o"></i>
@@ -725,7 +613,7 @@
                       </span>
                   <input type="checkbox" value="" name="">
                   <span class="text">Let theme shine like a star</span>
-                  <small class="label label-success"><i class="fa fa-clock-o"></i> 3 days</small>
+                  <small class="tag tag-success"><i class="fa fa-clock-o"></i> 3 days</small>
                   <div class="tools">
                     <i class="fa fa-edit"></i>
                     <i class="fa fa-trash-o"></i>
@@ -738,7 +626,7 @@
                       </span>
                   <input type="checkbox" value="" name="">
                   <span class="text">Check your messages and notifications</span>
-                  <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 week</small>
+                  <small class="tag tag-primary"><i class="fa fa-clock-o"></i> 1 week</small>
                   <div class="tools">
                     <i class="fa fa-edit"></i>
                     <i class="fa fa-trash-o"></i>
@@ -751,7 +639,7 @@
                       </span>
                   <input type="checkbox" value="" name="">
                   <span class="text">Let theme shine like a star</span>
-                  <small class="label label-default"><i class="fa fa-clock-o"></i> 1 month</small>
+                  <small class="tag tag-default"><i class="fa fa-clock-o"></i> 1 month</small>
                   <div class="tools">
                     <i class="fa fa-edit"></i>
                     <i class="fa fa-trash-o"></i>
@@ -1053,7 +941,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1065,7 +953,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1077,7 +965,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1089,7 +977,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1192,7 +1080,7 @@
   $.widget.bridge('uibutton', $.ui.button);
 </script>
 <!-- Bootstrap 3.3.5 -->
-<script src="bootstrap/js/bootstrap.min.js"></script>
+<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 <!-- Morris.js charts -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
 <script src="plugins/morris/morris.min.js"></script>
@@ -1215,7 +1103,7 @@
 <!-- FastClick -->
 <script src="plugins/fastclick/fastclick.js"></script>
 <!-- AdminLTE App -->
-<script src="dist/js/app.min.js"></script>
+<script src="dist/js/adminlte.min.js"></script>
 <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
 <script src="dist/js/pages/dashboard.js"></script>
 <!-- AdminLTE for demo purposes -->

index2.html

@@ -16,9 +16,6 @@
   <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
-  <!-- AdminLTE Skins. Choose a skin from the css/skins
-       folder instead of downloading all of them to reduce the load. -->
-  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.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:// -->
@@ -30,455 +27,345 @@
 <body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
 
-  <header class="main-header">
-
+  <!-- Navbar -->
+  <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
     <!-- Logo -->
-    <a href="index2.html" class="logo">
-      <!-- mini logo for sidebar mini 50x50 pixels -->
-      <span class="logo-mini"><b>A</b>LT</span>
-      <!-- logo for regular state and mobile devices -->
-      <span class="logo-lg"><b>Admin</b>LTE</span>
+    <a class="navbar-brand text-xs-center" href="#">
+      <span class="logo hidden-md-down"><b>Admin</b>LTE</span>
+      <span class="logo logo-mini"><b>A</b>LT</span>
     </a>
 
-    <!-- Header Navbar: style can be found in header.less -->
-    <nav class="navbar navbar-static-top" role="navigation">
-      <!-- Sidebar toggle button-->
-      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-        <span class="sr-only">Toggle navigation</span>
-      </a>
-      <!-- Navbar Right Menu -->
-      <div class="navbar-custom-menu">
+    <!-- Left navbar links -->
     <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>
-                        Support Team
-                        <small><i class="fa fa-clock-o"></i> 5 mins</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <!-- end message -->
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        AdminLTE Design Team
-                        <small><i class="fa fa-clock-o"></i> 2 hours</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Developers
-                        <small><i class="fa fa-clock-o"></i> Today</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Sales Department
-                        <small><i class="fa fa-clock-o"></i> Yesterday</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <div class="pull-left">
-                        <img src="dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
-                      </div>
-                      <h4>
-                        Reviewers
-                        <small><i class="fa fa-clock-o"></i> 2 days</small>
-                      </h4>
-                      <p>Why not buy a new awesome theme?</p>
-                    </a>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
       </li>
     </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="fa fa-users text-aqua"></i> 5 new members joined today
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
-                      page and may cause design problems
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-users text-red"></i> 5 new members joined
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-shopping-cart text-green"></i> 25 sales made
-                    </a>
-                  </li>
-                  <li>
-                    <a href="#">
-                      <i class="fa fa-user text-red"></i> You changed your username
-                    </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 -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Create a nice theme
-                        <small class="pull-right">40%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">40% Complete</span>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <!-- end task item -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Some task I need to do
-                        <small class="pull-right">60%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">60% Complete</span>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <!-- end task item -->
-                  <li><!-- Task item -->
-                    <a href="#">
-                      <h3>
-                        Make beautiful transitions
-                        <small class="pull-right">80%</small>
-                      </h3>
-                      <div class="progress xs">
-                        <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                          <span class="sr-only">80% 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="row">
-                  <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>
-                </div>
-                <!-- /.row -->
-              </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>
-          <!-- Control Sidebar Toggle Button -->
-          <li>
-            <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
-          </li>
-        </ul>
-      </div>
+    <div class="navbar-"></div>
 
+    <!-- Right navbar links -->
+    <ul class="nav navbar-nav float-sm-right">
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-comments-o"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">
+            <div class="media">
+              <div class="media-left">
+                <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              </div>
+              <div class="media-body">
+                <p class="no-margin">Lola Stockholm</p>
+                <p class="text-sm no-margin">What are you up to?</p>
+              </div>
+            </div>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <div class="media">
+              <div class="media-left">
+                <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              </div>
+              <div class="media-body">
+                <p class="no-margin">Lola Stockholm</p>
+                <p class="text-sm no-margin">What are you up to?</p>
+              </div>
+            </div>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-bell-o"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">
+            Account
+          </a>
+        </div>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-search"></i></a>
+        <div class="dropdown-menu">
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Usage</a>
+          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-gears"></i></a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <a href="#" class="dropdown-item">Item</a>
+        </div>
+      </li>
+    </ul>
   </nav>
-  </header>
-  <!-- Left side column. contains the logo and sidebar -->
+  <!-- /.navbar -->
+
+  <!-- Main Sidebar Container -->
   <aside class="main-sidebar">
-    <!-- sidebar: style can be found in sidebar.less -->
-    <section class="sidebar">
-      <!-- Sidebar user panel -->
-      <div class="user-panel">
-        <div class="pull-left image">
-          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel clearfix">
+        <div class="image">
+          <img src="dist/img/user2-160x160.jpg" class="img-rounded" alt="User Image">
         </div>
-        <div class="pull-left info">
-          <p>Alexander Pierce</p>
-          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+        <div class="info">
+          <h6>Alexander Pierce</h6>
+          <!-- Status -->
+          <div class="dropdown">
+            <a href="#" data-toggle="dropdown" class="dropdown-toggle status btn btn-default btn-xs">Account</a>
+            <div class="dropdown-menu dropdown-menu-right">
+              <a class="dropdown-item" href="#">Profile</a>
+              <a class="dropdown-item" href="#">Settings</a>
+              <a class="dropdown-item" href="#">Logout</a>
             </div>
           </div>
-      <!-- search form -->
+        </div>
+      </div>
+
       <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>
+        <input type="search" name="q" class="form-control" placeholder="Search" data-widget="treeview-search" data-target="#searchable-treeview">
       </form>
-      <!-- /.search form -->
-      <!-- sidebar menu: : style can be found in sidebar.less -->
-      <ul class="sidebar-menu">
-        <li class="header">MAIN NAVIGATION</li>
-        <li class="active treeview">
-          <a href="#">
-            <i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
-          </a>
-          <ul class="treeview-menu">
-            <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
-            <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
-          </ul>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-files-o"></i>
-            <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
-          </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
-            <li><a href="pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
-            <li><a href="pages/layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
-            <li><a href="pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
-          </ul>
-        </li>
-        <li>
-          <a href="pages/widgets.html">
-            <i class="fa fa-th"></i> <span>Widgets</span>
-            <small class="label pull-right bg-green">new</small>
-          </a>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-pie-chart"></i>
-            <span>Charts</span>
+
+      <!-- Sidebar Menu -->
+      <nav>
+        <ul class="nav nav-pills nav-sidebar nav-stacked" id="searchable-treeview" data-widget="treeview" role="menu">
+          <li class="nav-header">Components</li>
+          <!-- Optionally, you can add icons to the links using the .nav-icon class
+               paired with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fa fa-dashboard"></i> <span class="text">Dashboard</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
-            <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
-            <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
-            <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="./index.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.1</a>
+              </li>
+              <li class="nav-item">
+                <a href="./index2.html" class="nav-link active"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.2</a>
+              </li>
+              <li class="nav-item">
+                <a href="./index3.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.3</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-laptop"></i>
-            <span>UI Elements</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-th"></i> <span class="text">Widgets</span> <span class="tag tag-danger float-xs-right">New</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-pie-chart"></i> <span class="text">Charts</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/UI/general.html"><i class="fa fa-circle-o"></i> General</a></li>
-            <li><a href="pages/UI/icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
-            <li><a href="pages/UI/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
-            <li><a href="pages/UI/sliders.html"><i class="fa fa-circle-o"></i> Sliders</a></li>
-            <li><a href="pages/UI/timeline.html"><i class="fa fa-circle-o"></i> Timeline</a></li>
-            <li><a href="pages/UI/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> ChartJS</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Morris</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Flot</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inline</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-edit"></i> <span>Forms</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-tree"></i> <span class="text">UI Elements</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
-            <li><a href="pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
-            <li><a href="pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Icons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Buttons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Sliders</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-table"></i> <span>Tables</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-edit"></i> <span class="text">Forms</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/tables/simple.html"><i class="fa fa-circle-o"></i> Simple tables</a></li>
-            <li><a href="pages/tables/data.html"><i class="fa fa-circle-o"></i> Data tables</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Advanced Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Editors</a>
+              </li>
             </ul>
           </li>
-        <li>
-          <a href="pages/calendar.html">
-            <i class="fa fa-calendar"></i> <span>Calendar</span>
-            <small class="label pull-right bg-red">3</small>
-          </a>
-        </li>
-        <li>
-          <a href="pages/mailbox/mailbox.html">
-            <i class="fa fa-envelope"></i> <span>Mailbox</span>
-            <small class="label pull-right bg-yellow">12</small>
-          </a>
-        </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-folder"></i> <span>Examples</span>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-table"></i> <span class="text">Tables</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="pages/examples/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
-            <li><a href="pages/examples/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
-            <li><a href="pages/examples/login.html"><i class="fa fa-circle-o"></i> Login</a></li>
-            <li><a href="pages/examples/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
-            <li><a href="pages/examples/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
-            <li><a href="pages/examples/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
-            <li><a href="pages/examples/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
-            <li><a href="pages/examples/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
-            <li><a href="pages/examples/pace.html"><i class="fa fa-circle-o"></i> Pace Page</a></li>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Simple Tables</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Data Tables</a>
+              </li>
             </ul>
           </li>
-        <li class="treeview">
-          <a href="#">
-            <i class="fa fa-share"></i> <span>Multilevel</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-calendar"></i> <span class="text">Calendar</span>
+              <span class="tag tag-info float-xs-right">2</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-envelope-o"></i> <span class="text">Mailbox</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
-          <ul class="treeview-menu">
-            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
-            <li>
-              <a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
-              <ul class="treeview-menu">
-                <li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
-                <li>
-                  <a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
-                  <ul class="treeview-menu">
-                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                    <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
-                  </ul>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inbox</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Compose</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Read</a>
               </li>
             </ul>
           </li>
-            <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-book"></i> <span class="text">Pages</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Invoice</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Profile</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Login</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Register</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Lockscreen</a>
+              </li>
             </ul>
           </li>
-        <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
-        <li class="header">LABELS</li>
-        <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
-        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
-        <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-plus-square-o"></i> <span class="text">Extras</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 404</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 500</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Blank Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="starter.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Starter Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Pace Page</a>
+              </li>
             </ul>
-    </section>
+          </li>
+          <li class="nav-header">Miscellaneous</li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-sitemap"></i> <span class="text">Multilevel</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One</a></li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two</a></li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
+                    <ul class="nav nav-treeview">
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                    </ul><!-- Level 3 -->
+                  </li>
+                </ul><!-- Level 2 -->
+              </li>
+            </ul><!-- Level 1 -->
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-file"></i> <span class="text">Documentation</span>
+            </a>
+          </li>
+          <li class="nav-header">Labels</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-danger"></i> <span class="text">Important</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-warning"></i> <span class="text">Warning</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-info"></i> <span class="text">Informational</span></a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
     <!-- /.sidebar -->
   </aside>
 
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
     <!-- Content Header (Page header) -->
-    <section class="content-header">
-      <h1>
-        Dashboard
-        <small>Version 2.0</small>
-      </h1>
-      <ol class="breadcrumb">
-        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-        <li class="active">Dashboard</li>
+    <div class="content-header container-fluid">
+      <div class="row">
+        <div class="col-sm-6">
+          <h1>Dashboard</h1>
+        </div><!-- /.col -->
+        <div class="col-sm-6">
+          <ol class="breadcrumb float-sm-right">
+            <li class="breadcrumb-item"><a href="#">Home</a></li>
+            <li class="breadcrumb-item active">Dashboard</li>
           </ol>
-    </section>
+        </div><!-- /.col -->
+      </div><!-- /.row -->
+    </div>
+    <!-- /.content-header -->
 
     <!-- Main content -->
-    <section class="content">
+    <section class="content container-fluid">
       <!-- Info boxes -->
       <div class="row">
-        <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="info-box">
             <span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
 
@@ -491,7 +378,7 @@
           <!-- /.info-box -->
         </div>
         <!-- /.col -->
-        <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="info-box">
             <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
 
@@ -506,9 +393,9 @@
         <!-- /.col -->
 
         <!-- fix for small devices only -->
-        <div class="clearfix visible-sm-block"></div>
+        <div class="clearfix hidden-md-up"></div>
 
-        <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="info-box">
             <span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
 
@@ -521,7 +408,7 @@
           <!-- /.info-box -->
         </div>
         <!-- /.col -->
-        <div class="col-md-3 col-sm-6 col-xs-12">
+        <div class="col-xs-12 col-sm-6 col-md-3">
           <div class="info-box">
             <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
 
@@ -930,7 +817,7 @@
                   <h3 class="box-title">Latest Members</h3>
 
                   <div class="box-tools pull-right">
-                    <span class="label label-danger">8 New Members</span>
+                    <span class="tag tag-danger">8 New Members</span>
                     <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                     </button>
                     <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
@@ -1022,7 +909,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR9842</a></td>
                     <td>Call of Duty IV</td>
-                    <td><span class="label label-success">Shipped</span></td>
+                    <td><span class="tag tag-success">Shipped</span></td>
                     <td>
                       <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
                     </td>
@@ -1030,7 +917,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR1848</a></td>
                     <td>Samsung Smart TV</td>
-                    <td><span class="label label-warning">Pending</span></td>
+                    <td><span class="tag tag-warning">Pending</span></td>
                     <td>
                       <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
                     </td>
@@ -1038,7 +925,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
                     <td>iPhone 6 Plus</td>
-                    <td><span class="label label-danger">Delivered</span></td>
+                    <td><span class="tag tag-danger">Delivered</span></td>
                     <td>
                       <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
                     </td>
@@ -1046,7 +933,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
                     <td>Samsung Smart TV</td>
-                    <td><span class="label label-info">Processing</span></td>
+                    <td><span class="tag tag-info">Processing</span></td>
                     <td>
                       <div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
                     </td>
@@ -1054,7 +941,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR1848</a></td>
                     <td>Samsung Smart TV</td>
-                    <td><span class="label label-warning">Pending</span></td>
+                    <td><span class="tag tag-warning">Pending</span></td>
                     <td>
                       <div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
                     </td>
@@ -1062,7 +949,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR7429</a></td>
                     <td>iPhone 6 Plus</td>
-                    <td><span class="label label-danger">Delivered</span></td>
+                    <td><span class="tag tag-danger">Delivered</span></td>
                     <td>
                       <div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
                     </td>
@@ -1070,7 +957,7 @@
                   <tr>
                     <td><a href="pages/examples/invoice.html">OR9842</a></td>
                     <td>Call of Duty IV</td>
-                    <td><span class="label label-success">Shipped</span></td>
+                    <td><span class="tag tag-success">Shipped</span></td>
                     <td>
                       <div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
                     </td>
@@ -1231,7 +1118,7 @@
                   </div>
                   <div class="product-info">
                     <a href="javascript:;" class="product-title">Samsung TV
-                      <span class="label label-warning pull-right">$1800</span></a>
+                      <span class="tag tag-warning pull-right">$1800</span></a>
                         <span class="product-description">
                           Samsung 32" 1080p 60Hz LED Smart HDTV.
                         </span>
@@ -1244,7 +1131,7 @@
                   </div>
                   <div class="product-info">
                     <a href="javascript:;" class="product-title">Bicycle
-                      <span class="label label-info pull-right">$700</span></a>
+                      <span class="tag tag-info pull-right">$700</span></a>
                         <span class="product-description">
                           26" Mongoose Dolomite Men's 7-speed, Navy Blue.
                         </span>
@@ -1256,7 +1143,7 @@
                     <img src="dist/img/default-50x50.gif" alt="Product Image">
                   </div>
                   <div class="product-info">
-                    <a href="javascript:;" class="product-title">Xbox One <span class="label label-danger pull-right">$350</span></a>
+                    <a href="javascript:;" class="product-title">Xbox One <span class="tag tag-danger pull-right">$350</span></a>
                         <span class="product-description">
                           Xbox One Console Bundle with Halo Master Chief Collection.
                         </span>
@@ -1269,7 +1156,7 @@
                   </div>
                   <div class="product-info">
                     <a href="javascript:;" class="product-title">PlayStation 4
-                      <span class="label label-success pull-right">$399</span></a>
+                      <span class="tag tag-success pull-right">$399</span></a>
                         <span class="product-description">
                           PlayStation 4 500GB Console (PS4)
                         </span>
@@ -1368,7 +1255,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1380,7 +1267,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1392,7 +1279,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1404,7 +1291,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1500,11 +1387,11 @@
 <!-- jQuery 2.1.4 -->
 <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
 <!-- Bootstrap 3.3.5 -->
-<script src="bootstrap/js/bootstrap.min.js"></script>
+<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 <!-- FastClick -->
 <script src="plugins/fastclick/fastclick.js"></script>
 <!-- AdminLTE App -->
-<script src="dist/js/app.min.js"></script>
+<script src="dist/js/adminlte.min.js"></script>
 <!-- Sparkline -->
 <script src="plugins/sparkline/jquery.sparkline.min.js"></script>
 <!-- jvectormap -->

pages/UI/buttons.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -172,7 +172,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -333,7 +333,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1532,7 +1532,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1544,7 +1544,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1556,7 +1556,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1568,7 +1568,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/general.html

@@ -83,7 +83,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -160,7 +160,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -203,7 +203,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -364,7 +364,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1480,7 +1480,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1492,7 +1492,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1504,7 +1504,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1516,7 +1516,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/icons.html

@@ -102,7 +102,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -179,7 +179,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -221,7 +221,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -382,7 +382,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -2855,7 +2855,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2867,7 +2867,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2879,7 +2879,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2891,7 +2891,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/modals.html

@@ -68,7 +68,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -145,7 +145,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -188,7 +188,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -345,7 +345,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -723,7 +723,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -735,7 +735,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -747,7 +747,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -759,7 +759,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/sliders.html

@@ -58,7 +58,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -135,7 +135,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -177,7 +177,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -338,7 +338,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -646,7 +646,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -658,7 +658,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -670,7 +670,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -682,7 +682,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/timeline.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -727,7 +727,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -739,7 +739,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -751,7 +751,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -763,7 +763,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/calendar.html

@@ -55,7 +55,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -132,7 +132,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -175,7 +175,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -628,7 +628,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -640,7 +640,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -652,7 +652,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -664,7 +664,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/charts/chartjs.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -81,7 +81,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -102,7 +102,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -221,7 +221,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -530,7 +530,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -542,7 +542,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -554,7 +554,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -566,7 +566,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/charts/flot.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -172,7 +172,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -333,7 +333,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -673,7 +673,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -685,7 +685,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -697,7 +697,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -709,7 +709,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/charts/inline.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -172,7 +172,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -333,7 +333,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -911,7 +911,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -923,7 +923,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -935,7 +935,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -947,7 +947,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/charts/morris.html

@@ -54,7 +54,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -131,7 +131,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -173,7 +173,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -334,7 +334,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -643,7 +643,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -655,7 +655,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -667,7 +667,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -679,7 +679,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/404.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -578,7 +578,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -590,7 +590,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -602,7 +602,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -614,7 +614,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/500.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -579,7 +579,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -591,7 +591,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -603,7 +603,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -615,7 +615,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/blank.html

@@ -53,7 +53,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -82,7 +82,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -103,7 +103,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -225,7 +225,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -474,7 +474,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -486,7 +486,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -498,7 +498,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -510,7 +510,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/invoice.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -708,7 +708,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -720,7 +720,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -732,7 +732,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -744,7 +744,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/pace.html

@@ -55,7 +55,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -84,7 +84,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -105,7 +105,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -227,7 +227,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -487,7 +487,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -499,7 +499,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -511,7 +511,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -523,7 +523,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/examples/profile.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -529,11 +529,11 @@
               <strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
 
               <p>
-                <span class="label label-danger">UI Design</span>
-                <span class="label label-success">Coding</span>
-                <span class="label label-info">Javascript</span>
-                <span class="label label-warning">PHP</span>
-                <span class="label label-primary">Node.js</span>
+                <span class="tag tag-danger">UI Design</span>
+                <span class="tag tag-success">Coding</span>
+                <span class="tag tag-info">Javascript</span>
+                <span class="tag tag-warning">PHP</span>
+                <span class="tag tag-primary">Node.js</span>
               </p>
 
               <hr>
@@ -907,7 +907,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -919,7 +919,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -931,7 +931,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -943,7 +943,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/forms/advanced.html

@@ -62,7 +62,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -139,7 +139,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -182,7 +182,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -343,7 +343,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -937,7 +937,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -949,7 +949,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -961,7 +961,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -973,7 +973,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/forms/editors.html

@@ -54,7 +54,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -131,7 +131,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -173,7 +173,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -334,7 +334,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -607,7 +607,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -619,7 +619,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -631,7 +631,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -643,7 +643,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/forms/general.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -172,7 +172,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -333,7 +333,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -935,7 +935,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -947,7 +947,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -959,7 +959,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -971,7 +971,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/layout/boxed.html

@@ -51,7 +51,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -80,7 +80,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -101,7 +101,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -222,7 +222,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -474,7 +474,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -486,7 +486,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -498,7 +498,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -510,7 +510,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/layout/collapsed-sidebar.html

@@ -54,7 +54,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -83,7 +83,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -104,7 +104,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -226,7 +226,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -480,7 +480,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -492,7 +492,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -504,7 +504,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -516,7 +516,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/layout/fixed.html

@@ -55,7 +55,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -84,7 +84,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -105,7 +105,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -227,7 +227,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -480,7 +480,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -492,7 +492,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -504,7 +504,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -516,7 +516,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/layout/top-nav.html

@@ -72,7 +72,7 @@
               <!-- Menu toggle button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-envelope-o"></i>
-                <span class="label label-success">4</span>
+                <span class="tag tag-success">4</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 4 messages</li>
@@ -108,7 +108,7 @@
               <!-- Menu toggle button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-bell-o"></i>
-                <span class="label label-warning">10</span>
+                <span class="tag tag-warning">10</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 10 notifications</li>
@@ -131,7 +131,7 @@
               <!-- Menu Toggle Button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-flag-o"></i>
-                <span class="label label-danger">9</span>
+                <span class="tag tag-danger">9</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 9 tasks</li>

pages/mailbox/compose.html

@@ -59,7 +59,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -88,7 +88,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -109,7 +109,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -228,7 +228,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -304,7 +304,7 @@
             <i class="fa fa-angle-left pull-right"></i>
           </a>
           <ul class="treeview-menu">
-            <li><a href="mailbox.html">Inbox <span class="label label-primary pull-right">13</span></a></li>
+            <li><a href="mailbox.html">Inbox <span class="tag tag-primary pull-right">13</span></a></li>
             <li class="active"><a href="compose.html">Compose</a></li>
             <li><a href="read-mail.html">Read</a></li>
           </ul>
@@ -391,10 +391,10 @@
             <div class="box-body no-padding">
               <ul class="nav nav-pills nav-stacked">
                 <li><a href="mailbox.html"><i class="fa fa-inbox"></i> Inbox
-                  <span class="label label-primary pull-right">12</span></a></li>
+                  <span class="tag tag-primary pull-right">12</span></a></li>
                 <li><a href="#"><i class="fa fa-envelope-o"></i> Sent</a></li>
                 <li><a href="#"><i class="fa fa-file-text-o"></i> Drafts</a></li>
-                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="label label-warning pull-right">65</span></a>
+                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="tag tag-warning pull-right">65</span></a>
                 </li>
                 <li><a href="#"><i class="fa fa-trash-o"></i> Trash</a></li>
               </ul>
@@ -565,7 +565,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -577,7 +577,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -589,7 +589,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -601,7 +601,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/mailbox/mailbox.html

@@ -56,7 +56,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -85,7 +85,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -106,7 +106,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -225,7 +225,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -301,7 +301,7 @@
             <i class="fa fa-angle-left pull-right"></i>
           </a>
           <ul class="treeview-menu">
-            <li class="active"><a href="mailbox.html">Inbox <span class="label label-primary pull-right">13</span></a>
+            <li class="active"><a href="mailbox.html">Inbox <span class="tag tag-primary pull-right">13</span></a>
             </li>
             <li><a href="compose.html">Compose</a></li>
             <li><a href="read-mail.html">Read</a></li>
@@ -389,10 +389,10 @@
             <div class="box-body no-padding">
               <ul class="nav nav-pills nav-stacked">
                 <li class="active"><a href="#"><i class="fa fa-inbox"></i> Inbox
-                  <span class="label label-primary pull-right">12</span></a></li>
+                  <span class="tag tag-primary pull-right">12</span></a></li>
                 <li><a href="#"><i class="fa fa-envelope-o"></i> Sent</a></li>
                 <li><a href="#"><i class="fa fa-file-text-o"></i> Drafts</a></li>
-                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="label label-warning pull-right">65</span></a>
+                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="tag tag-warning pull-right">65</span></a>
                 </li>
                 <li><a href="#"><i class="fa fa-trash-o"></i> Trash</a></li>
               </ul>
@@ -709,7 +709,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -721,7 +721,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -733,7 +733,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -745,7 +745,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/mailbox/read-mail.html

@@ -56,7 +56,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -85,7 +85,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -106,7 +106,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -225,7 +225,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -301,7 +301,7 @@
             <i class="fa fa-angle-left pull-right"></i>
           </a>
           <ul class="treeview-menu">
-            <li><a href="mailbox.html">Inbox <span class="label label-primary pull-right">13</span></a></li>
+            <li><a href="mailbox.html">Inbox <span class="tag tag-primary pull-right">13</span></a></li>
             <li><a href="compose.html">Compose</a></li>
             <li class="active"><a href="read-mail.html">Read</a></li>
           </ul>
@@ -387,10 +387,10 @@
             <div class="box-body no-padding">
               <ul class="nav nav-pills nav-stacked">
                 <li><a href="mailbox.html"><i class="fa fa-inbox"></i> Inbox
-                  <span class="label label-primary pull-right">12</span></a></li>
+                  <span class="tag tag-primary pull-right">12</span></a></li>
                 <li><a href="#"><i class="fa fa-envelope-o"></i> Sent</a></li>
                 <li><a href="#"><i class="fa fa-file-text-o"></i> Drafts</a></li>
-                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="label label-warning pull-right">65</span></a>
+                <li><a href="#"><i class="fa fa-filter"></i> Junk <span class="tag tag-warning pull-right">65</span></a>
                 </li>
                 <li><a href="#"><i class="fa fa-trash-o"></i> Trash</a></li>
               </ul>
@@ -631,7 +631,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -643,7 +643,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -655,7 +655,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -667,7 +667,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/tables/data.html

@@ -54,7 +54,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -131,7 +131,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -174,7 +174,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -335,7 +335,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1441,7 +1441,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1453,7 +1453,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1465,7 +1465,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1477,7 +1477,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/tables/simple.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -767,28 +767,28 @@
                   <td>183</td>
                   <td>John Doe</td>
                   <td>11-7-2014</td>
-                  <td><span class="label label-success">Approved</span></td>
+                  <td><span class="tag tag-success">Approved</span></td>
                   <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                 </tr>
                 <tr>
                   <td>219</td>
                   <td>Alexander Pierce</td>
                   <td>11-7-2014</td>
-                  <td><span class="label label-warning">Pending</span></td>
+                  <td><span class="tag tag-warning">Pending</span></td>
                   <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                 </tr>
                 <tr>
                   <td>657</td>
                   <td>Bob Doe</td>
                   <td>11-7-2014</td>
-                  <td><span class="label label-primary">Approved</span></td>
+                  <td><span class="tag tag-primary">Approved</span></td>
                   <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                 </tr>
                 <tr>
                   <td>175</td>
                   <td>Mike Doe</td>
                   <td>11-7-2014</td>
-                  <td><span class="label label-danger">Denied</span></td>
+                  <td><span class="tag tag-danger">Denied</span></td>
                   <td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
                 </tr>
               </table>
@@ -876,7 +876,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -888,7 +888,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -900,7 +900,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -912,7 +912,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/widgets.html

@@ -52,7 +52,7 @@
           <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>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <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>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <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>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1608,7 +1608,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1620,7 +1620,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1632,7 +1632,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1644,7 +1644,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

starter.html

@@ -15,7 +15,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="dist/css/adminlte.min.css">
-  <!-- Google Font: Roboto -->
+  <!-- Google Font: Source Sans Pro -->
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
 </head>
 <!--
@@ -38,7 +38,7 @@ to get the desired effect
 |               | sidebar-mini                            |
 |---------------------------------------------------------|
 -->
-<body class="hold-transition skin-blue sidebar-mini">
+<body class="hold-transition skin-blue sidebar-mini control-sidebar-open">
 <div class="wrapper">
   <!-- Navbar -->
   <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
@@ -59,46 +59,93 @@ to get the desired effect
 
     <!-- Right navbar links -->
     <ul class="nav navbar-nav float-sm-right">
+      <!-- Messages Dropdown Menu -->
       <li class="nav-item dropdown">
-          <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-comments-o"></i></a>
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="fa fa-comments-o"></i>
+          <span class="tag tag-danger navbar-tag">3</span>
+        </a>
         <div class="dropdown-menu dropdown-menu-lg">
           <a href="#" class="dropdown-item">
-              <div class="media">
+            <!-- Message Start -->
             <div class="media-left">
-                  <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              <img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
             </div>
             <div class="media-body">
-                  <p class="no-margin">Lola Stockholm</p>
-                  <p class="text-sm no-margin">What are you up to?</p>
-                </div>
+              <h3 class="dropdown-item-title">
+                Brad Diesel
+                <span class="float-xs-right text-xs text-danger"><i class="fa fa-star"></i></span>
+              </h3>
+              <p class="text-sm">Call me whenever you can...</p>
+              <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
             </div>
+            <!-- Message End -->
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-              <div class="media">
+            <!-- Message Start -->
             <div class="media-left">
-                  <img src="/dist/img/user1-128x128.jpg" alt="User Avatar" class="navbar-img">
+              <img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
             </div>
             <div class="media-body">
-                  <p class="no-margin">Lola Stockholm</p>
-                  <p class="text-sm no-margin">What are you up to?</p>
-                </div>
+              <h3 class="dropdown-item-title">
+                John Pierce
+                <span class="float-xs-right text-xs text-muted"><i class="fa fa-star"></i></span>
+              </h3>
+              <p class="text-sm">I got your message bro</p>
+              <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
             </div>
+            <!-- Message End -->
+          </a>
           <div class="dropdown-divider"></div>
-              <a href="#" class="dropdown-footer">See All Messages</a>
-            </a>
-          </div>
-      </li>
-      <li class="nav-item dropdown">
-          <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-bell-o"></i></a>
-          <div class="dropdown-menu dropdown-menu-lg">
           <a href="#" class="dropdown-item">
-              Account
+            <!-- Message Start -->
+            <div class="media-left">
+              <img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle">
+            </div>
+            <div class="media-body">
+              <h3 class="dropdown-item-title">
+                Nora Silvester
+                <span class="float-xs-right text-xs text-warning"><i class="fa fa-star"></i></span>
+              </h3>
+              <p class="text-sm">The subject goes here</p>
+              <p class="text-xs text-muted"><i class="fa fa-clock-o margin-r-5"></i> 4 Hours Ago</p>
+            </div>
+            <!-- Message End -->
           </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="fa fa-bell-o"></i>
+          <span class="tag tag-warning navbar-tag">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa fa-envelope icon-wide"></i> 4 new messages
+            <span class="float-xs-right text-muted text-sm">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa fa-users icon-wide"></i> 8 friend requests
+            <span class="float-xs-right text-muted text-sm">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa fa-file icon-wide"></i> 3 new reports
+            <span class="float-xs-right text-muted text-sm">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
         </div>
       </li>
       <li class="nav-item dropdown">
-        <a class="nav-link has-img" data-toggle="dropdown" href="#"><img src="./dist/img/user4-128x128.jpg" alt="User Account Menu Image" class="navbar-img img-circle"></a>
+        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-search"></i></a>
         <div class="dropdown-menu">
           <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
           <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
@@ -106,11 +153,8 @@ to get the desired effect
           <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
         </div>
       </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-gears"></i></a>
-        <div class="dropdown-menu dropdown-menu-lg">
-          <a href="#" class="dropdown-item">Item</a>
-        </div>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="false" href="#"><i class="fa fa-th-large"></i></a>
       </li>
     </ul>
   </nav>
@@ -140,61 +184,220 @@ to get the desired effect
       </div>
 
       <form action="#" method="get" class="sidebar-form">
+        <div class="form-group has-icon">
           <input type="search" name="q" class="form-control" placeholder="Search" data-widget="treeview-search" data-target="#searchable-treeview">
-      </form>
+          <button type="submit" class="form-icon"><i class="fa fa-search"></i></button>
+        </div>
+      </form><!-- /.sidebar-form -->
+      <div class="visible-sidebar-mini"><i class="fa fa-search"></i></div>
 
       <!-- Sidebar Menu -->
       <nav>
         <ul class="nav nav-pills nav-sidebar nav-stacked" id="searchable-treeview" data-widget="treeview" role="menu">
-          <li class="nav-header">Navigation</li>
+          <li class="nav-header">COMPONENTS</li>
           <!-- Optionally, you can add icons to the links using the .nav-icon class
                paired with font-awesome or any other icon font library -->
-          <li class="nav-item menu-open">
-            <a href="#" class="nav-link active">
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
               <i class="nav-icon fa fa-dashboard"></i> <span class="text">Dashboard</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
             <ul class="nav nav-treeview">
               <li class="nav-item">
-                <a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v1.0</a>
+                <a href="./index.html" class="nav-link active"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.1</a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v2.0</a>
+                <a href="./index2.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.2</a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link"><i class="fa fa-link nav-icon"></i> Dashboard v3.0</a>
+                <a href="./index3.html" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Dashboard v.3</a>
               </li>
             </ul>
           </li>
           <li class="nav-item">
             <a href="#" class="nav-link">
-              <i class="nav-icon fa fa-link"></i> <span class="text">Multilevel</span>
+              <i class="nav-icon fa fa-th"></i> <span class="text">Widgets</span> <span class="tag tag-danger float-xs-right">New</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-pie-chart"></i> <span class="text">Charts</span>
               <i class="fa fa-angle-left pull-right"></i>
             </a>
             <ul class="nav nav-treeview">
-              <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
               <li class="nav-item">
-                <a href="#" class="nav-link"><span>Link in level 2</span> <i class="fa fa-angle-left pull-right"></i></a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
-                  <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
-                </ul>
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> ChartJS</a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link"><span>Link in level 2</span> <i class="fa fa-angle-left pull-right"></i></a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Morris</a>
+              </li>
               <li class="nav-item">
-                    <a href="#" class="nav-link">Link in level 2</a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
-                      <li class="nav-item"><a href="#" class="nav-link">Link in level 2</a></li>
-                    </ul>
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Flot</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inline</a>
               </li>
             </ul>
           </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-tree"></i> <span class="text">UI Elements</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Icons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Buttons</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Sliders</a>
+              </li>
             </ul>
           </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-edit"></i> <span class="text">Forms</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> General Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Advanced Elements</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Editors</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-table"></i> <span class="text">Tables</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Simple Tables</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Data Tables</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">EXAMPLES</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-calendar"></i> <span class="text">Calendar</span>
+              <span class="tag tag-info float-xs-right">2</span>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-envelope-o"></i> <span class="text">Mailbox</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Inbox</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Compose</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Read</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-book"></i> <span class="text">Pages</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Invoice</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Profile</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Login</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Register</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Lockscreen</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fa fa-plus-square-o"></i> <span class="text">Extras</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 404</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Error 500</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Blank Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="starter.html" class="nav-link active"><i class="fa fa-circle-o nav-icon"></i> Starter Page</a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Pace Page</a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">MISCELLANEOUS</li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-sitemap"></i> <span class="text">Multilevel</span>
+              <i class="fa fa-angle-left pull-right"></i>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One</a></li>
+              <li class="nav-item">
+                <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two</a></li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
+                    <ul class="nav nav-treeview">
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                      <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-circle-o nav-icon"></i> Level Three</a></li>
+                    </ul><!-- Level 3 -->
+                  </li>
+                </ul><!-- Level 2 -->
+              </li>
+            </ul><!-- Level 1 -->
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fa fa-file"></i> <span class="text">Documentation</span>
+            </a>
+          </li>
+          <li class="nav-header">LABELS</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-danger"></i> <span class="text">Important</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-warning"></i> <span class="text">Warning</span></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link"><i class="fa fa-circle-o text-info"></i> <span class="text">Informational</span></a>
+          </li>
         </ul>
       </nav>
       <!-- /.sidebar-menu -->
@@ -281,7 +484,100 @@ to get the desired effect
     <!-- /.content -->
   </div>
   <!-- /.content-wrapper -->
-  <div class="clearfix"></div>
+
+  <!-- Control Sidebar (a secondary optional sidebar) -->
+  <aside class="control-sidebar control-sidebar-dark">
+    <!-- Tabs -->
+    <ul class="nav nav-tabs">
+      <li class="nav-item">
+        <a class="nav-link active" href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a>
+      </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+      <!-- Home tab content -->
+      <div class="tab-pane active" id="control-sidebar-home-tab">
+        <h5>Notifications</h5>
+        <div class="media">
+          <div class="media-left">
+            <i class="fa fa-birthday-cake bg-red size-40 img-rounded"></i>
+          </div>
+          <div class="media-body">
+            <h6 class="no-margin">Langdon's Birthday</h6>
+            <p class="text-sm">Will be 23 on April 24th</p>
+          </div>
+        </div>
+        <div class="media">
+          <div class="media-left">
+            <i class="fa fa-clock-o bg-green size-40 img-rounded"></i>
+          </div>
+          <div class="media-body">
+            <h6 class="no-margin">Call Robert</h6>
+            <p class="text-sm">6:00 PM</p>
+          </div>
+        </div>
+
+        <h5 class="control-sidebar-heading">Tasks Progress</h5>
+        <ul class="list-unstyled">
+          <li>
+            <h6>
+              <a href="#">
+                Custom Theme Design
+                <span class="tag tag-danger float-xs-right">70%</span>
+              </a>
+            </h6>
+            <progress class="progress progress-danger progress-xs" value="70" max="100"></progress>
+          </li>
+          <li>
+            <h6>
+              <a href="#">
+                Create Shipping Tags
+                <span class="tag tag-warning float-xs-right">60%</span>
+              </a>
+            </h6>
+            <progress class="progress progress-warning progress-xs" value="60" max="100"></progress>
+          </li>
+          <li>
+            <h6>
+              <a href="#">
+                Send Invitations
+                <span class="tag tag-info float-xs-right">40%</span>
+              </a>
+            </h6>
+            <progress class="progress progress-info progress-xs" value="40" max="100"></progress>
+          </li>
+        </ul>
+        <!-- /.control-sidebar-menu -->
+      </div>
+      <!-- /.tab-pane -->
+
+      <!-- Settings tab content -->
+      <div class="tab-pane" id="control-sidebar-settings-tab">
+        <form method="post">
+          <h5>General Settings</h5>
+
+          <div class="form-check">
+            <label class="form-control-label d-block">
+              <input type="checkbox" class="form-check-input float-xs-right" checked>
+              Report panel usage
+            </label>
+            <small class='form-text'>Some information about this general settings option</small>
+          </div>
+          <!-- /.form-check -->
+        </form>
+      </div>
+      <!-- /.tab-pane -->
+    </div>
+  </aside>
+  <!-- /.control-sidebar -->
+
+  <!-- THIS CLEARFIX IS REQUIRED FOR THE LAYOUT TO WORK! -->
+  <div class="clearfix"></div><!-- /.clearfix -->
+
   <!-- Main Footer -->
   <footer class="main-footer">
     <!-- To the right -->
@@ -291,83 +587,6 @@ to get the desired effect
     <!-- Default to the left -->
     <strong>Copyright &copy; 2015 <a href="#">Company</a>.</strong> All rights reserved.
   </footer>
-  <!-- Control Sidebar -->
-  <aside class="control-sidebar control-sidebar-dark">
-    <!-- Create the tabs -->
-    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
-      <li class="nav-item" class="active">
-        <a class="nav-link" href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a>
-      </li>
-    </ul>
-    <!-- Tab panes -->
-    <div class="tab-content">
-      <!-- Home tab content -->
-      <div class="tab-pane active" id="control-sidebar-home-tab">
-        <h3 class="control-sidebar-heading">Recent Activity</h3>
-        <ul class="control-sidebar-menu">
-          <li>
-            <a href="javascript:;">
-              <i class="menu-icon fa fa-birthday-cake bg-red"></i>
-
-              <div class="menu-info">
-                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
-
-                <p>Will be 23 on April 24th</p>
-              </div>
-            </a>
-          </li>
-        </ul>
-        <!-- /.control-sidebar-menu -->
-
-        <h3 class="control-sidebar-heading">Tasks Progress</h3>
-        <ul class="control-sidebar-menu">
-          <li>
-            <a href="javascript:;">
-              <h4 class="control-sidebar-subheading">
-                Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
-              </h4>
-
-              <div class="progress progress-xxs">
-                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
-              </div>
-            </a>
-          </li>
-        </ul>
-        <!-- /.control-sidebar-menu -->
-
-      </div>
-      <!-- /.tab-pane -->
-      <!-- Stats tab content -->
-      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
-      <!-- /.tab-pane -->
-      <!-- Settings tab content -->
-      <div class="tab-pane" id="control-sidebar-settings-tab">
-        <form method="post">
-          <h3 class="control-sidebar-heading">General Settings</h3>
-
-          <div class="form-group">
-            <label class="control-sidebar-subheading">
-              Report panel usage
-              <input type="checkbox" class="pull-right" checked>
-            </label>
-
-            <p>
-              Some information about this general settings option
-            </p>
-          </div>
-          <!-- /.form-group -->
-        </form>
-      </div>
-      <!-- /.tab-pane -->
-    </div>
-  </aside>
-  <!-- /.control-sidebar -->
-  <!-- Add the sidebar's background -->
-  <div class="control-sidebar-bg"></div>
 </div>
 <!-- ./wrapper -->