AdminLTELogo

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.
  • 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.1 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>.

To get a smooth scrolling to the anchor you need to add .scroll-smooth to your HTML tag like this <html class="scroll-smooth"> otherwise it jumps directly to your anchor, .scroll-smooth can cause issues with a Chrome extension called ScrollAnywhere.

Preloader

Preloader to avoid https://github.com/ColorlibHQ/AdminLTE/discussions/3319

<div class="wrapper">
  <!-- Preloader -->
  <div class="preloader">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>
</div>
  • Preloader elements should be added inside .wrapper element.
  • You can replace image OR modify size OR include any preload items inside .preloader element.

Dark Mode

AdminLTE 3.1 provides a dark mode option. You can add in body tag:

  • .dark-mode

Color Variations

AdminLTE 3.1 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.

You must use only .navbar-dark without only combination.

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-checkbox & custom-radio you can add this classes:

  • .custom-control-input-*

You can also change the look to outlined checkbox & radio with adding the .custom-control-input-outline on the custom control input.

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

  • .custom-range-*

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-*