I am currently working on a web application frontend using Bootstrap 4 and facing an issue with creating a footer that remains at the bottom of the viewport regardless of content length. I have seen similar questions raised before, but none of the suggested solutions seem to work for me. In essence, I want the footer to start at the bottom of the page if the content does not fill the entire page, without having a fixed footer that covers content when scrolling.
Below is the HTML code snippet I have so far:
<footer class="container-fluid text-center py-5 mt-auto footer" id="footer">
<div class="row mx-auto footer-row">
<div class="col-md-12"></div>
<div class="col-12 col-md">
<i class="fas fa-dna footer-dna fa-2x"></i>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Random feature</a></li>
<li><a href="#">Team feature</a></li>
<li><a href="#">Stuff for developers</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a href="/newsletter">Sign Up For Email</a></li>
<li><a href="#">Resource name</a></li>
<li><a href="#">Another resource</a></li>
<li><a href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a href="#">Team</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
Currently, the footer appears below the final content on the page rather than staying fixed at the bottom based on content length. You can view the codepen link with the HTML and CSS here: https://codepen.io/franchise/pen/LYpjxYM. Any insights on what might be causing this issue would be greatly appreciated. Thanks in advance for your assistance.