Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Sample HTML page with Twitter's Bootstrap, Ryan Fait's Sticky Footer, and a full-width footer
<!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 Jul 5, 2012

Just what I was looking for too, thanks!

aalaap commented Jul 7, 2012

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

guzru commented Aug 8, 2012

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.

ketri commented Sep 18, 2012

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!

Drane commented Jul 4, 2013

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!

Dhamu28 commented Aug 2, 2014

Thanx!!!! to help


Thanks :D

mshamie commented Aug 8, 2015



Excelent! I could finally get my sticky footer working! Thanks man, I really appreciate it.

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.