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>

3
  • 1
    Please check your CSS file paths...
    – sajee
    Oct 13, 2017 at 4: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, 2017 at 5:10
  • When I'm checking on your provided conde snippet, No any styles applied to the HTML content.
    – sajee
    Oct 13, 2017 at 5:22

6 Answers 6

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

6
  • 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) Mar 9, 2019 at 5:54
  • 1
    you could use min-vh-100 class instead of sticky-footer-wrapper
    – ziomyslaw
    Oct 29, 2019 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, 2020 at 18:56
  • Thanks a lot, your answer saved me a lot of work. Just a little tweak and it works like magic. Jan 23, 2021 at 6:18
  • seems like the only answer that works using pure bootstrap
    – ahong
    Feb 24, 2021 at 0:23
47

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;
}
3
  • Yes works correct when using scrolling content in Bootstrap 4.1.3
    – A.W.
    Sep 14, 2018 at 9:55
  • Thanks @Daryn smart solution!
    – nicowi
    Jan 24, 2019 at 23:04
  • 23
    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) Mar 9, 2019 at 5: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.

3
17

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

<footer class="footer fixed-bottom">
    ...
</footer>
3
  • 1
    that's not good, with "fixed-bottom" the footer will cover all the other elements if the page is short enough... Oct 26, 2018 at 17:04
  • 1
    This worked well for me. To fix the issue raised by @GianlucaGhettini, I just added a background to <footer> and padding-bottom to <body> (same as you need to set padding-top on <body> when using a fixed navbar).
    – Akaoni
    Nov 30, 2018 at 6: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) Mar 9, 2019 at 5: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

2
  • 1
    I think the body tag needs class="h-100" as well
    – Henry
    May 20, 2019 at 1:12
  • If you look closely at the example, this is in the source, I just managed to miss it. Thanks.
    – timelmer
    May 25, 2021 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

2
  • 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, 2021 at 18:05
  • @Kaszanas that is quite some work. You can refer to this solution stackoverflow.com/a/44156191/11230343 Apr 12, 2021 at 19:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.