Showing posts with label easy. Show all posts
Showing posts with label easy. Show all posts

Monday 27 January 2014

Twitter Bootstrap sticky footer (without the pain)

Strangely enough, the sticky footer examples which I've seen for Twitter Bootstrap 3 seem to ignore the fact that there is now a class which takes all the pain away. It's called 'navbar-fixed-bottom', and it is usually used to create a bottom up navigation bar. However, if you add it to your footer code, it works better than any other sticky footer examples. Here's how it works:
Create a footer thus:
<footer class="navbar-default navbar-fixed-bottom">
      <div class="container">
        <p>Hello world!</p>
      </div>
</footer>
Then style it using CSS thus:
footer.navbar-default.navbar-fixed-bottom
 {
      background:red;
      color:white;
      padding:1em 0;
 }
 footer.navbar-default.navbar-fixed-bottom p
 {
      margin:0;
 }
Easy! Sticky footers all the way for me now. They're really useful for mobile web apps.