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 documentationExample
<!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="../../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../../assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="../../assets/vendor/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="../../assets/vendor/polifills.js"><\/script>');
</script>
</body>
</html>