AdminLte/docs/layout.md

---

layout: page

title: Layout

Tip!

The starter page is a good place to start building your app if you'd like to start from scratch. {: .quote-info .mt-0}

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

{: .mt-4}

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. {: .quote-danger}

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>. {: .quote-info}

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. {: .quote-info}

Info

You can combine .navbar-* with .navbar-light or .navbar-dark. {: .quote-info}

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

{: .mt-4}

Black (black)

Gray Dark (gray-dark)

Gray (gray)

Light (light)

Colors

{: .mt-4}

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. {: .quote-info}

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