Embed URL


SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View gist:1855032
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>
<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" />
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;
<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>
<div class="push"><!--//--></div>
<div class="container">
<p>Put together in less than five minutes by <a href="" rel="author">Martin Bean</a>. Uses <a href="" rel="external">Twitter Bootstrap</a> and <a href="" rel="external">Ryan Fait&rsquo;s Sticky Footer</a>.</p>

Thanks for this!


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

eadam commented

Just what I was looking for too, thanks!

aalaap commented

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

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: 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! :)

Many thanx!

Thanx!!!! to help

Thanks :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.