Pied de page dans le bootstrap [dupliquer]

Question

J'essaie de rendre le pied de page flexible réactif pour le Web dans bootstrap, qui sera en bas de page (si le contenu est moins en bas de page et si le contenu augmente, changez en conséquence). C'est mon code que j'utilise. Qu'est-ce que je manque ou que je fais mal. Débutant au bootstrap et utilisant la version 4.5.0. Merci d'avance

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

C'est mon css

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

c'est le scrrenshot quand j'essaye de le voir dans une taille particulière. La photo n'est pas assez longue pour s'adapter à l'écran. Mais quand c'est dans un autre écran c'est bien

mon pied de page est à l'intérieur de ce div qui n'a pas la pleine largeur de l'écran lorsque j'inspecte la page. J'ai essayé d'ajouter une largeur min à 100% et 100vh également

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

}

Answer 1

Vous pouvez utiliser la classe intégrée bootstrap d-flex flex-column min-vh-100pour votre conteneur principal et vos mt-automoyens . Ainsi, votre pied de page sera toujours en bas de page en fonction du contenu. Vous trouverez ci-dessous l'extrait du mêmemargin-top autofooter

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