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>