Layout

Tip!

The starter page is a good place to start building your app if you'd like to start from scratch.

The layout consists of four major parts:

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

Layout Options

Note!

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

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

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

Skins

Skins can be found in the dist/css/skins folder. Choose the skin file that you want and then add the appropriate class to the body tag to change the template's appearance. Here is the list of available skins:

Skin Class Preview
skin-blue
skin-blue-light
skin-yellow
skin-yellow-light
skin-green
skin-green-light
skin-purple
skin-purple-light
skin-red
skin-red-light
skin-black
skin-black-light
PREMIUM TEMPLATE
Material Dashboard Pro

Material Dashboard Pro ─ $59

Angular 2 Premium Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design

Preview Buy Now

853+ purchases