Rodapé no bootstrap [duplicado]

Question

Estou tentando fazer um rodapé flexível responsivo na web no bootstrap, que ficará na parte inferior da página (se o conteúdo for menor na parte inferior da página e se o conteúdo aumentar, então mude de acordo). Este é o meu código que estou usando. O que estou perdendo ou fazendo de errado. Iniciante no bootstrap e usando a versão 4.5.0. Agradeço antecipadamente

   <footer class="footer">
       <div class="container-fluid">
          <ul class="footertext">
                <li class="list">
                    About Us
                </li>
                <li class="list">
                    Contact Us
                </li>
            </ul>
             


         </div>
   </footer>

Este é o meu css

 .footer {
        position: absolute;
        bottom: 0;
        width: 100%;    
        background-color: black;
    }

este é o scrrenshot quando tento vê-lo em um tamanho específico. O fotter não fica longo o suficiente para caber na tela. Mas quando está em outra tela está bom

meu rodapé está dentro desta div que não tem largura de tela inteira quando inspeciono a página. Tentei adicionar largura mínima a 100% e 100vh também

 .page-container {
position: relative;
min-height: 100vh;
/*min-width: 100%;*/

}

Answer 1

Você pode usar a classe embutida de bootstrap d-flex flex-column min-vh-100para seu contêiner principal e mt-automeios margin-top autopara o seu footer. Portanto, o seu rodapé estará sempre no final da página em relação ao conteúdo. Abaixo está o snippet para o mesmo

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
  <section>
    <h1>My content</h1>
  </section>
  <footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>