footer.html

<div class="footer">
  <div class="container">
    <center>
      <div style="line-height: 50%;"><br></div>
      <a class="foot-link" href="https://mau.fi/">Home</a>
      <a class="foot-link" href="https://github.com/tulir">Projects</a>
      <div style="line-height: 100%;"><br></div>
      <a class="foot-image" href="mailto:tulir@maunium.net">
        <img width="32" height="32" alt="Email" src="https://maunium.net/images/email.svg" onerror="this.src='https://maunium.net/images/email.png'"/>
      </a>
      <a class="foot-image" href="https://github.com/tulir">
        <img width="32" height="32" alt="Github" src="https://maunium.net/images/github.svg" onerror="this.src='https://maunium.net/images/github.png'"/>
      </a>
      <a class="foot-image" href="https://t.me/tulir">
        <img width="32" height="32" alt="Telegram" src="https://maunium.net/images/telegram.svg" onerror="this.src='https://maunium.net/images/telegram.png'"/>
      </a>
      <a class="foot-image" href="https://matrix.to/#/@tulir:maunium.net">
        <img width="32" height="32" alt="Matrix" src="https://maunium.net/images/matrix.svg" onerror="this.src='https://maunium.net/images/matrix.png'"/>
      </a>
      <div style="line-height: 100%;"><br></div>
      <div class="secondary-text">Copyright © 2020 Maunium</div>
      <div style="line-height: 50%;"><br></div>
    </center>
  </div>
</div>

<!-- jQuery first, then Bootstrap JS. -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

<script>
  $(document).ready(fixFooter);
  $(window).resize(fixFooter);

  function fixFooter() {
    var docHeight = $(window).height();
    var footerHeight = $('.footer').height();
    var footerTop = $('.footer').position().top + footerHeight;

    if (footerTop < docHeight) {
      $('.footer').css('margin-top', (docHeight - footerTop) + 'px');
    }
  }
</script>