bootstrap-3 footer
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
<hr />
<div class="row">
<div class="col-lg-12">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Product for Mac</a></li>
<li><a href="#">Product for Windows</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Web analytics</a></li>
<li><a href="#">Presentations</a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Product Help</a></li>
<li><a href="#">Developer API</a></li>
</ul>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills nav-justified">
<li><a href="/">© 2013 Company Name.</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</div>
</div>
</div>
Thanks, nice snippet,Thanks, very helpful!,Nice snippet and thanks :D,Nice snippet.How can we fix this footer to bottom of the screen.I have used sticky footer but then the contents are getting overlapped with the footer .Suggest me other options.Thanks in advance.,Just add this to your css file:body{margin-bottom:ABCpx;}where ABC is the height of your sticky footer.,http://andrewlyndem.com,Very nice snippet. The responsiveness for col-xs, col-sm and col-md should be improved. Right now, the whole page breaks with a lower width than col-lg/col-md.,thank,cool!,The author is blairanderson

Loading...