Nowadays, more website comprises 3 components. header, body and footer. With bootstrap, you can get it done even quicker. Here I created a sample start up project with most common layout in the world: Top fixed header, body and bottom sticked footer.
Here are some codes of the _layout.cshtml (if you are using MVC) or masterpages (asp.net) or any other languages whatever you call it.
For header section, use the bootstrap default “navbar” classes, you can set it to “navbar-fixed-top” or not, it is your choice. Set to top fixed, the header bar is always visible when you scrolling down.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand">Brand name</a>
<ul class="nav">
<li><a href="">Home</a></li>
<li class="divider-vertical"></li>
<li><a href="">Products</a></li>
<li class="divider-vertical"></li>
<li><a href="">FAQ</a></li>
</ul>
<ul class="nav pull-right">
<li><a href="">Register</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
</div>
</div>
For body section, I created a “wrap” div outside the “main” div, this is to make sure the footer stays after it. You will know what I mean after I show you the CSS
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
@RenderBody()
</div>
</div>
</div>
</div>
For footer section, using <footer> is completely ok with modernizer, and I created a 3 columns with same size for your footer navigation links.
<footer class="footer" style="background-color:#c2c2c2;">
<div class="container" style="margin:0 auto;">
<div class="row">
<div class="span2 offset2">
<h4>Company</h4>
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="span2 offset1">
<h4>Resource</h4>
<ul>
<li><a href="">Get help</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Support</a></li>
</ul>
</div>
<div class="span2 offset1">
<h4>Connect</h4>
<ul>
<li><a href="" title="Facebook">Facebook</a></li>
<li><a href="" title="Twitter">Twitter</a></li>
<li><a href="" title="LinkedIn">LinkedIn</a></li>
<li><a href="" title="Google+">Google+</a></li>
<li><a href="" title="RSS">RSS</a></li>
<li><a href="" title="Blogs">Blogs</a></li>
</ul>
</div>
</div>
</div>
</footer>
Now let’s see the CSS,
/* styles for layout */
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;
}
Your footer is sticked to the bottom always.
To download the project sample, go to codeplex
http://bootstrapfooter.codeplex.com/
