2019-07-15 13:32:00 +00:00
---
layout: page
title: Layout
---
> ##### Tip!
2019-11-07 06:32:20 +00:00
> 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.
2019-07-15 13:32:00 +00:00
{: .quote-info .mt-0}
The layout consists of four major parts:
2020-06-02 13:57:24 +00:00
2019-07-15 13:32:00 +00:00
- Wrapper `.wrapper` . A div that wraps the whole site.
- Main Header `.main-header` . Contains the logo and navbar.
2021-04-07 03:41:05 +00:00
- Main Sidebar `.main-sidebar` . Contains the sidebar user panel, search form and menu.
2019-07-15 13:32:00 +00:00
- 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}
2020-12-07 07:06:46 +00:00
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.
2019-07-15 13:32:00 +00:00
- Fixed Sidebar: use the class `.layout-fixed` to get a fixed sidebar.
2019-08-26 08:38:07 +00:00
- 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.
2019-07-15 13:32:00 +00:00
- 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.
2019-08-26 08:38:07 +00:00
##### Responsive Variations
2020-06-02 13:57:24 +00:00
You can also use the following classes for responsive changes with placing
2019-08-26 08:38:07 +00:00
- 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!
2020-04-01 15:41:46 +00:00
> 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.
2019-08-26 08:38:07 +00:00
{: .quote-info}
2021-01-18 15:44:41 +00:00
#### Preloader
Preloader to avoid [https://github.com/ColorlibHQ/AdminLTE/discussions/3319 ](https://github.com/ColorlibHQ/AdminLTE/discussions/3319 )
```html
< div class = "wrapper" >
<!-- Preloader -->
< div class = "preloader" >
2021-01-19 06:55:57 +00:00
< img src = "dist/img/AdminLTELogo.png" alt = "AdminLTELogo" height = "60" width = "60" >
2021-01-18 15:44:41 +00:00
< / 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.
2020-12-23 01:33:39 +00:00
#### Dark Mode
AdminLTE 3.1 provides a dark mode option. You can add in body tag:
- `.dark-mode`
2019-07-15 13:32:00 +00:00
#### Color Variations
2020-12-07 07:06:46 +00:00
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:
2019-07-15 13:32:00 +00:00
2019-07-17 21:05:57 +00:00
- `.navbar-*`
- `.sidebar-dark-*`
- `.sidebar-light-*`
2019-09-21 08:19:05 +00:00
- `.accent-*`
> ###### New
> You can use override the link/accent color in AdminLTE, you can add `.accent-*` to `body`.
{: .quote-info}
2019-07-15 13:32:00 +00:00
> ###### Info
2019-07-17 21:05:57 +00:00
> You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
2019-09-21 08:19:05 +00:00
{: .quote-info}
2019-07-15 13:32:00 +00:00
2020-12-23 01:33:39 +00:00
> ###### Recommended for Dark Mode
> You must use only `.navbar-dark` without only combination.
{: .quote-info}
2019-07-15 13:32:00 +00:00
The following colors are available:
2019-07-17 21:05:57 +00:00
##### Theme Colors
2020-06-02 13:57:24 +00:00
2019-07-17 21:05:57 +00:00
< div class = "row" >
< div class = "col-sm-4 col-lg-3 p-3 bg-primary" > Primary (primary) / Blue (blue)< / div >
2019-07-28 17:16:16 +00:00
< div class = "col-sm-4 col-lg-3 p-3 bg-secondary" > Secondary (secondary)< / div >
2019-07-17 21:05:57 +00:00
< div class = "col-sm-4 col-lg-3 p-3 bg-success" > Success (success) / Green (green)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-info" > Info (info) / Cyan (cyan)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-warning" > Warning (warning) / Yellow (yellow)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-danger" > Danger (danger) / Red (red)< / div >
2019-07-28 17:16:16 +00:00
< / div >
##### Black/White Nuances
{: .mt-4}
2020-06-02 13:57:24 +00:00
2019-07-28 17:16:16 +00:00
< div class = "row" >
< div class = "col-sm-4 col-lg-3 p-3 bg-black" > Black (black)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-gray-dark" > Gray Dark (gray-dark)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-gray" > Gray (gray)< / div >
2019-07-17 21:05:57 +00:00
< div class = "col-sm-4 col-lg-3 p-3 bg-light" > Light (light)< / div >
< / div >
2019-07-15 13:32:00 +00:00
2019-07-17 21:05:57 +00:00
##### Colors
{: .mt-4}
2020-06-02 13:57:24 +00:00
2019-07-15 13:32:00 +00:00
< div class = "row" >
2019-07-17 21:05:57 +00:00
< div class = "col-sm-4 col-lg-3 p-3 bg-indigo" > Indigo (indigo)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-navy" > Navy (navy)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-purple" > Purple (purple)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-fuchsia" > Fuchsia (fuchsia)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-pink" > Pink (pink)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-maroon" > Maroon (maroon)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-orange" > Orange (orange)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-lime" > Lime (lime)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-teal" > Teal (teal)< / div >
< div class = "col-sm-4 col-lg-3 p-3 bg-olive" > Olive (olive)< / div >
2019-07-15 13:32:00 +00:00
< / div >
2019-07-17 21:05:57 +00:00
> ##### Tip!
> You can use these color variations even with `.text-*`, `.bg-*` & much more.
{: .quote-info}
2019-08-26 08:38:07 +00:00
##### Custom Range / Switch
2020-06-02 13:57:24 +00:00
2020-09-23 06:51:41 +00:00
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-*`
2019-08-26 08:38:07 +00:00
For custom colored custom-range you can add this classes:
2020-06-02 13:57:24 +00:00
2019-08-26 08:38:07 +00:00
- `.custom-range-*`
For custom colored custom-switch you can add this classes:
2020-06-02 13:57:24 +00:00
2019-08-26 08:38:07 +00:00
- `.custom-switch-off-*` (for custom switch off)
- `.custom-switch-on-*` (for custom switch on)
2019-09-16 10:08:56 +00:00
##### Toasts
2020-06-02 13:57:24 +00:00
2019-09-16 10:08:56 +00:00
You can also use `bg-*` beside the `.toast` to get a nice colored toast.
2019-08-26 08:38:07 +00:00
##### Plugin Support
2020-06-02 13:57:24 +00:00
2019-08-26 08:38:07 +00:00
You can use the all the colors above with these plugins:
2020-06-02 13:57:24 +00:00
2019-08-26 08:38:07 +00:00
- Bootstrap Slider
- `.slider-*` (wrapped around the slider)
- iCheck-Bootstrap
- `.icheck-*`
