Project Description
Bootstrap extensions for footer to stick at the bottom

To try the project demo, click Project Demo

View the blog for more details: Bootstrap Sticky Footer

 

This project is using bootstrap to construct the layout,

top fix header, body and bottom sticking footer.
The code samples you need for a bottom sticky footer is,

Html:

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
@RenderBody()
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS:
html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}