##### Fixed Footer

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

The footer fixed layout has a fixed footer.

#### CSS Classes

In this page you can experience it. If you want to create a template with fixed footer you can use this layout.

This table contains classes related to the fixed footer layout.

Classes | Description
--- | ---
`.footer-fixed` | To set layout footer fixed you need to add `.footer-fixed` class in footer `<footer>` tag. Refer HTML markup line no 52.

#### HTML Markup

This section contains HTML Markup to create fixed footer layout.

- Line no 52: Just add `layout-light` class in body `<body>` tag as shown as below HTML markeup for fixed footer layout.

    <!DOCTYPE html>
    <html lang="en">
    <head></head>
    <body>
      <!-- Start Page Loading -->
      <div id="loader-wrapper">
      </div>
      <!-- End Page Loading -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START HEADER -->
      <header id="header" class="page-topbar">
      </header>
      <!-- END HEADER -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START MAIN -->
      <div id="main">
        <!-- START WRAPPER -->
        <div class="wrapper">

          <!-- START LEFT SIDEBAR NAV-->
          <aside id="left-sidebar-nav" class="nav-expanded nav-lock nav-collapsible">
          </aside>
          <!-- END LEFT SIDEBAR NAV-->

          <!-- //////////////////////////////////////////////////////////////////////////// -->

          <!-- START CONTENT -->
          <section id="content">
          </section>
          <!-- END CONTENT -->

          <!-- //////////////////////////////////////////////////////////////////////////// -->

          <!-- START RIGHT SIDEBAR NAV-->
          <aside id="right-sidebar-nav">
          </aside>
          <!-- LEFT RIGHT SIDEBAR NAV-->

        </div>
          <!-- END WRAPPER -->
       </div>
       <!-- END MAIN -->

          <!-- //////////////////////////////////////////////////////////////////////////// -->
          <!-- START FOOTER -->
          <footer class="page-footer footer-fixed gradient-45deg-purple-deep-orange">
          </footer>
          <!-- END FOOTER -->
    </body>
    </html>

add

- help_outline
- widgets
- today
- mail_outline