Pie de página en bootstrap [duplicado]
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;
}
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
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>