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 layout-navbar-fixed or layout-footer-fixed at the same time. Anything else can be mixed together.

AdminLTE 3.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 Sidebar: use the class .layout-fixed to get a fixed sidebar.
  • Fixed Navbar: use the class .layout-navbar-fixed to get a fixed navbar.
  • Fixed Footer: use the class .layout-footer-fixed to get a fixed footer.
  • 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.
Responsive Variations

You can also use the following classes for responsive changes with placing

  • Fixed Navbar:
    • use the class .layout-*-navbar-fixed to get a fixed navbar.
    • use the class .layout-*-navbar-not-fixed to get a not fixed navbar.
  • Fixed Footer:
    • use the class .layout-*-footer-fixed to get a fixed footer.
    • use the class .layout-*-footer-not-fixed to get a not fixed footer.
Tip!

If you want to use anchors with a fixed navbar, you need to add .anchor to you hidden anchor, e.g. <a id="testAnchor" class="anchor"></a>.

Color Variations

AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes:

  • .navbar-*
  • .sidebar-dark-*
  • .sidebar-light-*
  • .accent-*
New

You can use override the link/accent color in AdminLTE, you can add .accent-* to body.

Info

You can combine .navbar-* with .navbar-light or .navbar-dark.

The following colors are available:

Theme Colors
Primary (primary) / Blue (blue)
Secondary (secondary)
Success (success) / Green (green)
Info (info) / Cyan (cyan)
Warning (warning) / Yellow (yellow)
Danger (danger) / Red (red)
Black/White Nuances
Black (black)
Gray Dark (gray-dark)
Gray (gray)
Light (light)
Colors
Indigo (indigo)
Navy (navy)
Purple (purple)
Fuchsia (fuchsia)
Pink (pink)
Maroon (maroon)
Orange (orange)
Lime (lime)
Teal (teal)
Olive (olive)
Tip!

You can use these color variations even with .text-*, .bg-* & much more.

Custom Range / Switch

For custom colored custom-range you can add this classes:

  • .custom-range-*

For custom colored custom-switch you can add this classes:

  • .custom-switch-off-* (for custom switch off)
  • .custom-switch-on-* (for custom switch on)
Toasts

You can also use bg-* beside the .toast to get a nice colored toast.

Plugin Support

You can use the all the colors above with these plugins:

  • Bootstrap Slider
    • .slider-* (wrapped around the slider)
  • iCheck-Bootstrap
    • .icheck-*