public
Last active

Sample HTML page with Twitter's Bootstrap, Ryan Fait's Sticky Footer, and a full-width footer

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<title>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<header class="hero-unit">
<h1>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</h1>
<p>It's really <strong>not</strong> that hard, y&rsquo;know. Check out the source code and <abbr title="Cascading Style Sheets">CSS</abbr> of this web page for how to do it yourself.</p>
</header>
</div>
<div class="push"><!--//--></div>
</div>
<footer>
<div class="container">
<p>Put together in less than five minutes by <a href="http://www.martinbean.co.uk/" rel="author">Martin Bean</a>. Uses <a href="http://twitter.github.com/bootstrap/" rel="external">Twitter Bootstrap</a> and <a href="http://ryanfait.com/sticky-footer/" rel="external">Ryan Fait&rsquo;s Sticky Footer</a>.</p>
</div>
</footer>
</body>
</html>

No problem, @quartzmo. Hope you found it useful.

Just what I was looking for too, thanks!

The footer gets a 20px padding on the sides. I forked and fixed the footer:

https://gist.github.com/3066704

I don't know why, everythings works for me, exept for the fact that my footer is not visible unless I scroll down the page. Have any clue?

This is great, exactly what I needed. Thank you!

@guzru. I have exactly same problem.

@guzru @loremaster Bootstrap puts a "padding-top: 60px" on the body tag. Try setting that to 0.

Apparently bootstrap has padding-top: 60px" on the body tag.
In this example page: http://twitter.github.com/bootstrap/examples/hero.html it's in html, between bootstrap.css and bootstrap-responsive.css. Does someone know why it's not in the css..?
From what i've tested, apparently if you don't have the 60px, the hero-unit (or other content) doesn't stay at the same height when adjusting the browser size. Apparently it adds the needed 60px on larger monitors, but then on smaller sizes the responsive css rules over it when it isn't necessary. If I remove the padding, the footer works but hero jumps up and down when adjusting browser size...does anyone have insight on how this should be fixed or should I make the footer stick to the bottom with some other method?

@ketri, I faced the same issue and compensated it by adding this.

body {
  padding-top: 0;
}
.container {
  border-top: 60px solid transparent;
}

Concision! Far better than the mess I was making. Thank you!

Too bad it doesn't stick very well when page content larger than screen screen size. :)

But thanks anyway.

Needed to adjust the negative margin on .wrapper by a few px to play well with IE8, otherwise this was perfect thanks! :)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.