--- import Head from "@components/_head.astro"; import Footer from "@components/dashboard/_footer.astro"; import Topbar from "@components/dashboard/_topbar.astro"; import Sidenav from "@components/dashboard/_sidenav.astro"; import Scripts from "@components/_scripts.astro"; const title = "Layout | AdminLTE 4"; const path = "../../../dist"; const mainPage = "docs"; const page = "layout"; ---

Layout

  1. Docs
  2. Layout
Tips

The starter page is a good place to start building your app if you’d like to start from scratch.

The layout consists of five major parts:

  • Wrapper .app-wrapper . A div that wraps the whole site.
  • Main Header .app-header . Contains the logo and navbar.
  • Main Sidebar .app-sidebar . Contains the sidebar user panel and menu.
  • Content .app-main . Contains the page header and content.
  • Main Footer .app-footer . Contains the footer.

Layout Options

AdminLTE v4 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.
  • Mini Sidebar on Toggle: use the class .sidebar-expand-* .sidebar-mini to have a collapsed sidebar upon loading.
  • Collapsed Sidebar: use the class .sidebar-expand-* .sidebar-mini .sidebar-collapse to have a collapsed sidebar upon loading.