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. A div that wraps the whole site.
.main-header. Contains the logo and navbar.
.sidebar-wrapper. Contains the user panel and sidebar menu.
.content-wrapper. Contains the page header and content.
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.
.layout-fixedto get a fixed sidebar.
.layout-navbar-fixedto get a fixed navbar.
.layout-footer-fixedto get a fixed footer.
.sidebar-collapseto have a collapsed sidebar upon loading.
.layout-boxedto get a boxed layout that stretches only to 1250px.
.layout-top-navto remove the sidebar and have your links at the top navbar.
You can also use the following classes for responsive changes with placing
.layout-*-navbar-fixedto get a fixed navbar.
.layout-*-navbar-not-fixedto get a not fixed navbar.
.layout-*-footer-fixedto get a fixed footer.
.layout-*-footer-not-fixedto get a not fixed footer.
If you want to use anchors with a fixed navbar, you need to add
.anchorto you hidden anchor, e.g.
<a id="testAnchor" class="anchor"></a>.
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:
You can use override the link/accent color in AdminLTE, you can add
You can combine
The following colors are available:
You can use these color variations even with
.bg-*& much more.
For custom colored custom-range you can add this classes:
For custom colored custom-switch you can add this classes:
.custom-switch-off-*(for custom switch off)
.custom-switch-on-*(for custom switch on)
You can also use
bg-* beside the
.toast to get a nice colored toast.
You can use the all the colors above with these plugins:
.slider-*(wrapped around the slider)