Bootstrap 4 Sticky Footer Not Sticking

html css typo3 bootstrap-4 sticky-footer

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.

Landing Page

Sticky footer

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

Use the sticky footer with a fixed navbar if need be, too.

1 of 3

Please check your CSS file paths...

@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.

When I'm checking on your provided conde snippet, No any styles applied to the HTML content.

Zim

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

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)

you could use min-vh-100 class instead of sticky-footer-wrapper

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.

Thanks a lot, your answer saved me a lot of work. Just a little tweak and it works like magic.

seems like the only answer that works using pure bootstrap

Daryn

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;
}

Yes works correct when using scrolling content in Bootstrap 4.1.3

Thanks @Daryn smart solution!

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)

Benjineer

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.

This should be the correct answer, as it addresses the Bootstrap 4.0 snafu of not mentioning the html CSS requirements.

Check the explanation here :) freecodecamp.org/news/…

This is not a good solution, because in order for this to work, you must override body margin: 0; set in reboot. getbootstrap.com/docs/4.0/content/reboot

shacker

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

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

that's not good, with "fixed-bottom" the footer will cover all the other elements if the page is short enough...

This worked well for me. To fix the issue raised by @GianlucaGhettini, I just added a background to

Jigar

<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

I think the body tag needs class="h-100" as well

If you look closely at the example, this is in the source, I just managed to miss it. Thanks.

Swaleh Matongwa

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

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 that is quite some work. You can refer to this solution stackoverflow.com/a/44156191/11230343

Bootstrap 4 Sticky Footer Not Sticking

Sticky footer

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US