Sticky Footer

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Bootstrap Sticky footer documentation

Example

              
                <!DOCTYPE html>
                <html lang="en" class="h-100">
                <head>
                  <!-- Title -->
                  <title>Sticky Footer | Front - Responsive Website Template</title>

                  <!-- Required Meta Tags Always Come First -->
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                  <!-- Favicon -->
                  <link rel="shortcut icon" href="../favicon.ico">

                  <!-- Font -->
                  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">

                  <!-- CSS Front Template -->
                  <link rel="stylesheet" href="./assets/css/theme.css">
                </head>
                <body class="d-flex flex-column h-100">
                  <!-- ========== MAIN ========== -->
                  <main id="content" role="main" class="flex-shrink-0">
                    <div class="container">
                      <h1 class="mt-5">Sticky footer</h1>
                      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
                    </div>
                  </main>
                  <!-- ========== END MAIN ========== -->

                  <!-- ========== FOOTER ========== -->
                  <footer class="bg-light mt-auto py-3">
                    <div class="container">
                      <span class="text-muted">Place sticky footer content here.</span>
                    </div>
                  </footer>
                  <!-- ========== END FOOTER ========== -->

                  <!-- JS Global Compulsory -->
                  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
                  <script src="./node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
                  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

                  <!-- JS Front -->
                  <script src="./assets/js/hs.core.js"></script>

                  <!-- IE Support -->
                  <script>
                    if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script src="./node_modules/babel-polyfill/dist/polyfill.js"><\/script>');
                  </script>
                </body>
                </html>