Menu
Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
The sticky footer is not sticking at the bottom of the page.
Here is a copy of the page source as it has been rendered.
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Landing Page</title> <meta name="generator" content="TYPO3 CMS"> <link rel="stylesheet" type="text/css" href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all"> <link rel="stylesheet" type="text/css" href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230" media="all"> <link rel="stylesheet" type="text/css" href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966" media="all"> <script src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465" type="text/javascript"></script> <script src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602" type="text/javascript"></script> <script src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311" type="text/javascript"></script> </head> <body> <div class="container"> <div class="mt-1"> <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> <p> Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too. </p> <div class="row"> <div class="col">1 of 3</div> <div class="col">1 of 3</div> <div class="col">1 of 3</div> </div> </div> <footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer> </body> </html>
846
To make your footer stick to the bottom of the viewport, add classes d-flex , flex-column , and h-100 to the body tag. Also add class h-100 to <html> tag.
To fix your code you should give the footer: left of 0 and width: 100% and it will work. and that worked for me actually.
The Sticky footer pattern needs to meet the following requirements: Footer sticks to the bottom of the viewport when content is short. If the content of the page extends past the viewport bottom, the footer then sits below the content as normal.
Update 2020 - Bootstrap 4.5+
Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.
<div class="d-flex flex-column min-vh-100"> <nav> </nav> <main class="flex-fill"> </main> <footer> </footer> </div> Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
