Footer at bottom

footer.html

<style>
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }

body::after{ content:''; display:block; height:100px; }

footer{ 
  position:absolute; 
  bottom:0; 
  width:100%; 
  height:100px; 
}


/* FOR DEMO ONLY */
body{ font:bold 1.2em/2.5 arial; text-align:center; }
label{ cursor:pointer; display:inline-block; transition:1s ease; }
:checked ~ label{ margin-bottom:1400px; }

article{ width:40%; margin:0 auto; color:#444; }
header{ background:#D51B52; height:50px; color: #fff; }
footer{ background:#000; color:#fff; }
</style>


<header>HEADER</header>
<article>
    <br>
  <input type='checkbox' id='c' />
  <label for='c'>Toggle Content Height</label>
</article>
<footer>FOOTER</footer>

include bootstrap