2018-11-05 19:24:55 +08:00
|
|
|
---
|
|
|
|
|
layout: examples
|
|
|
|
|
title: Sticky Footer Template
|
2019-01-09 00:33:28 +08:00
|
|
|
extra_css:
|
|
|
|
|
- "sticky-footer.css"
|
2018-11-05 19:24:55 +08:00
|
|
|
html_class: "h-100"
|
|
|
|
|
body_class: "d-flex flex-column h-100"
|
2019-02-05 05:42:23 +08:00
|
|
|
include_js: false
|
2018-11-05 19:24:55 +08:00
|
|
|
---
|
2013-06-24 08:17:08 +08:00
|
|
|
|
2018-11-05 19:24:55 +08:00
|
|
|
<!-- Begin page content -->
|
2020-03-09 21:37:46 +08:00
|
|
|
<main class="flex-shrink-0">
|
2018-11-05 19:24:55 +08:00
|
|
|
<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>
|
2019-02-04 18:22:02 +08:00
|
|
|
<p>Use <a href="{{< docsref "/examples/sticky-footer-navbar" >}}">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
2018-11-05 19:24:55 +08:00
|
|
|
</div>
|
|
|
|
|
</main>
|
2013-06-24 08:17:08 +08:00
|
|
|
|
2019-05-15 16:51:45 +08:00
|
|
|
<footer class="footer mt-auto py-3 bg-light">
|
2018-11-05 19:24:55 +08:00
|
|
|
<div class="container">
|
|
|
|
|
<span class="text-muted">Place sticky footer content here.</span>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
