Docs : Layouts | Sneat - Bootstrap Dashboard PRO

Layouts

Helpful ready to use layouts that can save your time to get started with new page.

Layouts

Sneat provides following multiple layout types which are very easy to use.

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Menu -->
    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
      Menu (Navigation)
    </aside>
    <!--/ Menu -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Navbar -->
      <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        Navbar
      </nav>
      <!--/ Navbar -->

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          <div class="container-xxl">
            Footer
          </div>
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Menu -->
    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
      Menu (Navigation)
    </aside>
    <!--/ Menu -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Navbar -->
      <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        Navbar
      </nav>
      <!--/ Navbar -->

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl d-flex align-items-stretch flex-grow-1 p-0">


          <div class="flex-shrink-1 flex-grow-0 w-px-350 border-end container-p-x container-p-y">
            <div class="layout-example-sidebar layout-example-content-inner">
              Sidebar
            </div>
          </div>

          <div class="flex-shrink-1 flex-grow-1 container-p-x container-p-y">
            Content
          </div>
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-navbar-full layout-horizontal layout-without-menu">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Navbar -->
    <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
      Navbar
    </nav>
    <!--/ Navbar -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Menu -->
        <aside id="layout-menu" class="layout-menu-horizontal menu-horizontal  menu bg-menu-theme flex-grow-0">
          Menu (Navigation)
        </aside>
        <!--/ Menu -->

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
          Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar layout-without-menu">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Navbar -->
      <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        Navbar
      </nav>
      <!--/ Navbar -->

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
          Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar layout-without-navbar">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Menu -->
    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
      Menu (Navigation)
    </aside>
    <!--/ Menu -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
          Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Menu -->
    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
      Menu (Navigation)
    </aside>
    <!--/ Menu -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Navbar -->
      <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        Navbar
      </nav>
      <!--/ Navbar -->

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y">
          Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">

  <!-- Layout container -->
  <div class="layout-container">

    <!-- Menu -->
    <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
      Menu (Navigation)
    </aside>
    <!--/ Menu -->

    <!-- Layout page -->
    <div class="layout-page">

      <!-- Navbar -->
      <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
        Navbar
      </nav>
      <!--/ Navbar -->

      <!-- Content wrapper -->
      <div class="content-wrapper">

        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
          Content
        </div>
        <!--/ Content -->

        <!-- Footer -->
        <footer class="content-footer footer bg-footer-theme">
          Footer
        </footer>
        <!--/ Footer -->

        <!-- Content area backdrop -->
        <div class="content-backdrop fade"></div>
      </div>
      <!--/ Content wrapper -->

    </div>
    <!--/ Layout page -->

  </div>
  <!--/ Layout container -->

  <!-- Overlay -->
  <div class="layout-overlay layout-menu-toggle"></div>

  <!-- Drag Target Area To SlideIn Menu On Small Screens -->
  <div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->

Options

Configure the initial layout by setting layout control classes to the <html> tag.

Tip: Use TemplateCustomizer and configure template easily using config.js instead of using layout option classes manually. It is not recommended to use layout options classes while using TemplateCustomizer.

Class	Description
`layout-menu-collapsed`	Collapse layout menu(navigation) on large screens (>= 1200px). For vertical menu only.
`layout-menu-fixed`	Set layout menu(navigation) position to fixed.
`layout-navbar-fixed`	Set layout navbar position to fixed.
`layout-footer-fixed`	Set layout footer position to fixed.