Pie de página en bootstrap [duplicado]

Nov 24 2020

Estoy tratando de hacer un pie de página flexible que responda a la web en bootstrap, que estará en la parte inferior de la página (si el contenido es menor en la parte inferior de la página y si el contenido aumenta, cambie en consecuencia). Este es mi código que estoy usando. ¿Qué me estoy perdiendo o haciendo mal? Principiante para arrancar y usar la versión 4.5.0. Gracias de antemano

   <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 es mi css

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

este es el scrrenshot cuando trato de verlo en un tamaño particular. El fotter no es lo suficientemente largo para ajustarse a la pantalla. Pero cuando está en otra pantalla está bien

mi pie de página está dentro de este div que no tiene ancho de pantalla completo cuando inspecciono la página. Intenté agregar min-width a 100% y 100vh también

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

}

Respuestas

1 SaiManoj Nov 24 2020 at 11:58

Puede usar la clase incorporada de bootstrap d-flex flex-column min-vh-100para su contenedor principal y los mt-automedios margin-top autopara su footer. Por lo tanto, su pie de página siempre estará en la parte inferior de la página correspondiente al contenido. A continuación se muestra el fragmento de la misma

<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>