CSS

Stick footer to the bottom in Bootstrap 3

By Max
February 13, 2014
0

There are times when your page has very little content and you get a nasty looking half-browser page.
This is also happening if you have a SPA (Single Page Application) and your content varies in height and your footer jumps arround when this change.
So what can you do about it?

There is a little css you can add to do the magic!

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

This applies not only to bootstrap, but you can adapt it to your own layout.

Comments: 0

Leave a Reply

Your email address will not be published. Required fields are marked *