Sticky footer bootstrap 4 [duplicate] - css

Question

This question already has answers here:
Bootstrap 4 - Sticky footer - Dynamic footer height
(3 answers)
Footer in Bootstrap, that extends with content or sticks to the bottom
(3 answers)
Closed 4 years ago.
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;
}