Sticky footer bootstrap 4 [duplicate]

Question

I’m trying to make a sticky footer using bootstrap 4. How do I make sure regardless of how much content it always stays at the bottom of the screen? I've looked up other answers for sticky footers and haven't been able to get it to work so I wanted to share my code. I've tried changing out the position from fixed, absolute and relative none of which work. On another project I was able to get it to work with absolute. Does it have to do with my css for html and body?

HTML

<footer class="footer">
    <!-- <div class="container-fluid"> -->
    <a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
    </a>
    <a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
    </a>
    <p id="copyRight">@Copyright 2018 www.lucasstahl.com</p>
    <!-- </div> -->
</footer>

CSS

body,
html {
width: 100%;
height: 100%; 
/* min-height: 100%;
position: relative; */
background-position: center;
background-image: url("clark.png");
background-size: cover;
}

.footer {
/* clear: both; */
/* position: absolute; */
background-color: rgb(229, 240, 136);
text-align: center;
color: rgb(175, 167, 166);
border-top: 5px solid  rgb(175, 167, 166);
overflow: hidden;
padding-top: 20px;
bottom: 0;
width: 100%;
height: 100px;
}

The problem I have is that it's moving the footer depending on the size of the screen. It won't stay there all the time.

Answer 1

For different screens you will need to use media queries This will allow you define at each size of your screen how the footer will look.

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ Is what you need by the looks of things

Look at the code I've provided jsfiddle

<footer class="footer">
  <!-- <div class="container-fluid"> -->
  <nav>
    <li><a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a></li>
    <li><a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a></li>

    <li><a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
        </a></li>
    <li><a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
        </a></li>

    <li id="copyRight">@Copyright 2018 www.lucasstahl.com</li>
  </nav>
  <!-- </div> -->
</footer>

CSS

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: yellow;
  }

  nav {
    display: flex;
    list-style: none;
  }