AdminLTE/docs/layout.md

layout	title
page	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 navbar navbar.
• Fixed Footer: use the class .layout-footer-fixed to get a navbar 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.

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

Info

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

The following colors are available:

• Primary (primary) / Blue (blue)
• Secondary (secondary) / Gray (gray)
• Success (success) / Green (green)
• Info (info) / Cyan (cyan)
• Warning (warning) / Yellow (yellow)
• Danger (danger) / Red (red)
• Light (light)
• Dark (dark) / Gray Dark (gray-dark)

• Indigo (indigo)
• Purple (purple)
• Pink (pink)
• Orange (orange)
• Teal (teal)
• White (white)