How to make footer stay on the bottom of the page bootstrap 4

Question

This question may be a repeat! I'd like my footer to be at the bottom of the page, but not fixed there when I scroll. I'd like it to be like the footer on the bottom of this page Footer Example. This is my footer code so far, I've been using bootstrap 4 but I can't find a class to help me with what I want.

<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-twitch"></i></a>
</footer>

I'm well aware of the bootstrap class

.fixed-bottom but like I said, I don't want the footer to stay when I scroll.

Answer 1

You can use pure CSS, like this:

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color:#fff;
}