Bootstrap 4 Sticky Footer Not Sticking

Asked 13/10, 2017 at 4:47 Answered 13/11, 2019 at 2:16

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.

<!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>

Contrivance answered 13/10, 2017 at 4:47 Comment(3)

Please check your CSS file paths... – Rooster 13/10, 2017 at 4:53

@Rooster 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. – Contrivance 13/10, 2017 at 5:10

When I'm checking on your provided conde snippet, No any styles applied to the HTML content. – Rooster 13/10, 2017 at 5:22

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

Reynold answered 29/3, 2018 at 18:29 Comment(6)

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) – Faretheewell 9/3, 2019 at 5:54

you could use min-vh-100 class instead of sticky-footer-wrapper – Euphorbiaceous 29/10, 2019 at 10:40

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. – Housebreaking 12/2, 2020 at 18:56

Thanks a lot, your answer saved me a lot of work. Just a little tweak and it works like magic. – Kowal 23/1, 2021 at 6:18

seems like the only answer that works using pure bootstrap – Afghan 24/2, 2021 at 0: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. – Herron 10/4, 2021 at 18:27

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

Contrivance answered 13/10, 2017 at 5:33 Comment(3)

Yes works correct when using scrolling content in Bootstrap 4.1.3 – Sialagogue 14/9, 2018 at 9:55

Thanks @Contrivance smart solution! – Viol 24/1, 2019 at 23:4

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) – Faretheewell 9/3, 2019 at 5:55

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.

Roadstead answered 20/3, 2018 at 11:19 Comment(3)

This should be the correct answer, as it addresses the Bootstrap 4.0 snafu of not mentioning the html CSS requirements. – Astred 7/6, 2019 at 17:33

Check the explanation here :) freecodecamp.org/news/… – Scheelite 17/6, 2019 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. getbootstrap.com/docs/4.0/content/reboot – Selfimportant 20/8, 2019 at 16:26

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

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

Gracielagracile answered 16/10, 2018 at 6:57 Comment(3)

that's not good, with "fixed-bottom" the footer will cover all the other elements if the page is short enough... – Nitrogen 26/10, 2018 at 17:4

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). – Cark 30/11, 2018 at 6:20

<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

Investigation answered 15/3, 2019 at 11:33 Comment(2)

I think the body tag needs class="h-100" as well – Offprint 20/5, 2019 at 1:12

If you look closely at the example, this is in the source, I just managed to miss it. Thanks. – Rivas 25/5, 2021 at 16:3

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

Submediant answered 13/11, 2019 at 2:16 Comment(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? – Lunisolar 11/4, 2021 at 18:5

@Lunisolar that is quite some work. You can refer to this solution https://mcmap.net/q/257746/-how-can-i-get-the-height-of-an-element-using-css-only – Submediant 12/4, 2021 at 19:16

Recommended topics

Hot tags