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>