Bootstrap align-items doesn't work as expected - html

Question

I'm trying to make a simple webpage with header and footer using bootstrap 4, the problem is that the footer won't show in the end of the page.
here is my html, please can anyone tell me 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>

Answer 1

Please try it:
html, body {
height: 100%;
}
.appbox {
display: flex;
flex-wrap: wrap;
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
min-height: 100vh;
}
<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 w-100">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<div class="row align-items-end w-100">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>

Answer 2

You are using bootstrap classes in a wrong way. First you appbox is not having height:100% and align-items-* should be used with a flex container to align items inside not with the element you want to align.
You can correct your code like below without adding any external CSS (https://getbootstrap.com/docs/4.2/utilities/flex/)
html,
body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- you make this 100% height and a flex container with colmun direction -->
<div class="container appbox h-100 d-flex flex-column">
<div class="row">
<div class="col-12 text-center ">
<h3>Header</h3>
</div>
</div>
<!-- you use margin-top:auto to push footer at the bottom -->
<div class="row mt-auto">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>

Answer 3

Are you looking this kind of View ? then please check
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
<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="wrapper">
<div class="container">
<header class="hero-unit">
<h1>Header</h1>
<p>It's really <strong>not</strong> that hard, y’know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
</header>
</div>
<div class="push"><!--//--></div>
</div>
<footer>
<div class="container">
<p>Put together in less than five minutes by Martin Bean. Uses Twitter Bootstrap and Ryan Fait’s Sticky Footer.</p>
</div>
</footer>

Answer 4

Hope this helps.. thanks
html, body {
height: 100%;
}
.appbox {
border-left: #000000 solid 2px;
border-right: #000000 solid 2px;
height: 100%;
}
.footer{
position:absolute;
bottom:0;
right:0;
left:0;
}
<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 footer">
<div class="col-12 text-center">
<h3>Footer</h3>
</div>
</div>
</div>