For my simple webpage, I am using Bootstrap 4 to add a header and footer. However, I am facing an issue where the footer is not displaying at the end of the page. Below is the HTML code I am using. Can anyone please guide me on what to do?
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src='main.js'></script>
<div class="container appbox">
<div class="row align-items-start">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>