60

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>
Daryn
  • 1,551
  • 1
  • 15
  • 21
  • 1
    Please check your CSS file paths... – sajee Oct 13 '17 at 04:53
  • @sajee File paths are correct. I have verified by going view source -> then clicking on each one to see if it loads the text and they do. – Daryn Oct 13 '17 at 05:10
  • When I'm checking on your provided conde snippet, No any styles applied to the HTML content. – sajee Oct 13 '17 at 05:22

6 Answers6

94

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 17
    This is the only correct **sticky footer** out of these answers (fixed to bottom when content is less than a page, else pushed down past content until user scrolls to bottom); the others are fixed-bottom footers (remain always visible over content, fixed to bottom of browser during scroll) – Charney Kaye Mar 09 '19 at 05:54
  • 1
    you could use `min-vh-100` class instead of `sticky-footer-wrapper` – ziomyslaw Oct 29 '19 at 10:40
  • 1
    Thanks, best answer to the question: but is the sticky-footer-wrapper class really needed ? The flex-fill already fills the space pushing the footer to the bottom. – diogui Feb 12 '20 at 18:56
  • Thanks a lot, your answer saved me a lot of work. Just a little tweak and it works like magic. – Micheal N.D Jan 23 '21 at 06:18
  • seems like the only answer that works using pure bootstrap – ahong Feb 24 '21 at 00:23
  • Thanks man, you wouldn't believe the hoops I had to jump for Bootstrap 3. For Bootstrap 4, this is by far the simplest and best method. – Egor Tensin Apr 10 '21 at 18:27
46

Managed to figure it out. Maybe I have a misunderstanding on what "Sticky" is or something, but the solution was to change absolute -> fixed in the css file.

e.g. from:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

to:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}
Daryn
  • 1,551
  • 1
  • 15
  • 21
  • Yes works correct when using scrolling content in Bootstrap 4.1.3 – A.W. Sep 14 '18 at 09:55
  • Thanks @Daryn smart solution! – nicowi Jan 24 '19 at 23:04
  • 24
    This *is **not*** a sticky footer (fixed to bottom when content is less than a page, else pushed down past content until user scrolls to bottom); this is a fixed-bottom footer (remains always visible over content, fixed to bottom of browser during scroll) – Charney Kaye Mar 09 '19 at 05:55
38

The example in the Bootstrap 4 docs has the following CSS:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

You've probably forgotten to set html { position: relative; min-height: 100%; } - I know I usually forget that part.

Benjineer
  • 1,530
  • 18
  • 22
  • This should be the correct answer, as it addresses the Bootstrap 4.0 snafu of not mentioning the `html` CSS requirements. – Ryan Jun 07 '19 at 17:33
  • Check the explanation here :) https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ – jdnichollsc Jun 17 '19 at 17:31
  • This is not a good solution, because in order for this to work, you must override body margin: 0; set in reboot. https://getbootstrap.com/docs/4.0/content/reboot/ – Jason Honingford Aug 20 '19 at 16:26
17

In Bootstrap 4, use the fixed-bottom class to stick your footer. No custom CSS needed:

<footer class="footer fixed-bottom">
    ...
</footer>
shacker
  • 14,712
  • 8
  • 89
  • 89
  • 1
    that's not good, with "fixed-bottom" the footer will cover all the other elements if the page is short enough... – Gianluca Ghettini Oct 26 '18 at 17:04
  • 1
    This worked well for me. To fix the issue raised by @GianlucaGhettini, I just added a background to
    and padding-bottom to (same as you need to set padding-top on when using a fixed navbar).
     – Akaoni Nov 30 '18 at 06:20
  • 12
    This *is **not*** a sticky footer (fixed to bottom when content is less than a page, else pushed down past content until user scrolls to bottom); this is a fixed-bottom footer (remains always visible over content, fixed to bottom of browser during scroll) – Charney Kaye Mar 09 '19 at 05:51
6
<html class="h-100">
.
.
</html>

This should solve the problem. It is similar to Benjineer's answer but ready bootstrap class. Tested with Bootstrap 4.3.1

Jigar
  • 3,256
  • 1
  • 30
  • 51
  • 1
    I think the body tag needs `class="h-100"` as well – Henry May 20 '19 at 01:12
  • If you look _closely_ at the [example](https://getbootstrap.com/docs/4.3/examples/sticky-footer/), this is in the source, I just managed to miss it. Thanks. – timelmer May 25 '21 at 16:03
4

if you use

<footer class="footer fixed-bottom">
    ...
</footer>

remember to add

html {
    padding-bottom: >= footer height;
}

to the CSS to avoid blocking some content at the bottom of your page

Swaleh Matongwa
  • 698
  • 9
  • 16
  • Honestly this is the simplest and the only answer that has worked for me. Is there a way of automatically calculating what would be the ```padding-bottom``` value for a footer? – Kaszanas Apr 11 '21 at 18:05
  • @Kaszanas that is quite some work. You can refer to this solution https://stackoverflow.com/a/44156191/11230343 – Swaleh Matongwa Apr 12 '21 at 19:16