Layout | AdminLTE 3 Documentation
Description: AdminLTE v3 Documentaion

Layout | AdminLTE v3 Documentaion

# 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>`.

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

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