Footer di bootstrap [duplikat]

Question

Saya mencoba membuat footer fleksibel responsif web di bootstrap, yang akan berada di bagian bawah halaman (jika konten kurang di bagian bawah halaman dan jika konten meningkat maka ubah sesuai). Ini adalah kode saya yang saya gunakan. Apa yang saya lewatkan atau lakukan salah. Pemula untuk bootstrap dan menggunakan versi 4.5.0. Terima kasih sebelumnya

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

Ini css saya

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

ini adalah scrrenshot ketika saya mencoba melihatnya dalam satu ukuran tertentu. Fotter tidak cukup lama untuk muat di layar. Tapi ketika di layar lain tidak apa-apa

footer saya ada di dalam div ini yang tidak memiliki lebar layar penuh saat saya memeriksa halaman. saya mencoba menambahkan min-width ke 100% dan 100vh juga

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

}

Answer 1

Anda dapat menggunakan kelas bawaan bootstrap d-flex flex-column min-vh-100untuk wadah utama dan mt-autosarana margin-top autountuk footer. Jadi footer Anda akan selalu berada di bagian bawah halaman masing-masing ke konten. Di bawah ini adalah potongan yang sama

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