How do I create a non-sticky footer in Bootstrap?

Question

How do I produce a footer that spans the whole width of the screen (despite screen resolution) and stays at the bottom of the page?

When I search for this I get people providing code for sticky footers (footers that hoover with the page), and saying use absolute positioning (which I hear is a no no).

A perfect example of what I mean is the one of the sites twitter bootstrap cites as an example (https://www.gathercontent.com/). On that site the footer (which looks like a hero unit or something) is always on the bottom of the page.

Answer 1

If you are using bootstrap, this example shows how you can do it. The name is misleading on the site, but it stays at the bottom of the page if there isn't much content. It also moves down the page if there is a lot of content (so doesn't stick).

The footer:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

The CSS:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css

Make sure not to forget the

html {
 position: relative;
 min-height: 100%;
}