<div class="container text-secondary bg-dark">
 <footer class="sticky-bottom">
  <div class="col-md-4 d-flex align-items-center">
   <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
    <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
   </a>
  <span class="mb-3 mb-md-0 ">2024</span>
 </div>
  <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
   <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
   <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
   <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
  </ul>
 </footer>
</div>

I have this footer form bootstrap. I added “sticky-bottom” to it to make it stick to bottom of page. When there is long enough content to fill the page this footer works fine. But when ther isn’t enough content to fill the page this footer stay at middle of the page.