--- layout: page title: Layout --- > ##### Tip! > The [starter page](https://adminlte.io/themes/v3/starter.html) 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. - Main Sidebar `.main-sidebar`. Contains the sidebar user panel, search form and 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.2 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. ``. > > To get a smooth scrolling to the anchor you need to add `.scroll-smooth` to your HTML tag like this `` otherwise it jumps directly to your anchor, `.scroll-smooth` can cause issues with a Chrome extension called ScrollAnywhere. {: .quote-info} #### Preloader Preloader to avoid [https://github.com/ColorlibHQ/AdminLTE/discussions/3319](https://github.com/ColorlibHQ/AdminLTE/discussions/3319) ```html
AdminLTELogo
``` - 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.2 provides a dark mode option. You can add in body tag: - `.dark-mode` #### Color Variations AdminLTE 3.2 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} > ###### Recommended for Dark Mode > You must use only `.navbar-dark` without only combination. {: .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-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-*`