Sticky footer #306

hugovincent · 2011-09-25T22:50:21Z

It'd be good if Bootstrap supported sticky footers (floats to bottom of page for pages shorter than the browser window).

pkneale-ce · 2011-09-26T10:03:37Z

Agreed

dvanderbeek · 2011-09-28T13:00:30Z

You can make the footer sticky pretty easily using this method: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

pkneale-ce · 2011-09-29T06:05:13Z

Thanks - will take a look at this tonight.. ! :)

-----Original Message-----
From: dvanderbeek [mailto:[email protected]]
Sent: Wednesday, 28 September 2011 11:01 PM
To: Peter Kneale
Subject: Re: [bootstrap] Sticky footer (#306)

You can make the footer sticky pretty easily using this method: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Reply to this email directly or view it on GitHub:
#306 (comment)

mdo · 2011-10-04T06:06:17Z

Going to skip on this one—easy to add on with a limited about of CSS. If we get any more requests, we'll revisit.

mattruma · 2011-11-14T22:05:08Z

It would be nice if this was just part of the css ... maybe similar to container and container-fluid ... something like footer and footer-sticky.

JanDupal · 2011-11-25T12:08:19Z

+1

martinbean · 2011-11-25T12:22:58Z

Just add position: fixed; left: 0; right: 0; bottom: 0; to your "bottom-bar" and put some padding-bottom on your main container so your content doesn't get hidden underneath it.

I did it on a project recently (that's unfortunately not live yet, so can't demonstrate) and it really isn't too much trouble. Bootstrap is meant to be a starting point; you are allowed to add your own CSS on top!

EDIT: A more complete example, just to demonstrate how simple it is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
    <style>
        .container[role="main"] {
            padding-bottom: 60px;
        }
        .bottombar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
  </head>
  <body>
    <div class="container" role="main">
      <!-- your content -->
    </div>
    <div class="bottom-bar">
      <div class="bottombar-inner">
        <div class="container">
          <ul class="nav">
            <li><a href="#">Link 1</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

JanDupal · 2011-11-25T15:10:43Z

@martinbean thanks :)

dvanderbeek · 2011-11-25T15:36:58Z

Wouldn't this method cause the footer to always be visible? The method I suggested pushes the footer to the bottom if there is a small amount of content on the page, but if there is a lot of content the footer gets pushed "below the fold" so to speak. That way it isn't floating on top if the page scrolls.

martinbean · 2011-11-25T15:40:02Z

Sorry, I thought the issue was you wanted a static bottom bar like there is a static top bar.

Even then, it isn't that much code to add to achieve a sticky footer as @markdotto says. Why not write your own styles for it so it only applies if your <body> tag has a class of .footer-sticky? That way you can toggle the behaviour on or off with just the single class name.

dvanderbeek · 2011-11-25T15:43:37Z

That's a good idea. I will try that at some point.

dteoh · 2011-11-26T07:40:55Z

I used a combination of the technique found in http://jsdo.it/Bakey/bootstrap-sticky-footer and http://ryanfait.com/resources/footer-stick-to-bottom-of-page/.

For my html/haml I had something like:

%body
  .topbar
  .main
    .container
      # content here
      .push
%footer.footer

For the scss it was:

html, body {
    height: 100%;
}
.main {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1*($topbar-height + $footer-height - 10px);
}
.main > .container {
    padding-top: $topbar-height;
}
footer.footer {
    height: $footer-height;
    background: #eee;
}
.push {
    height: $footer-height + $topbar-height;
}

I think the topbar made this a pain to implement because of the $topbar-height padding. I also have a trial-and-error 10px in the margin calculation of the .main style.

It would be really nice to get an official or clean implementation that works with and without the topbar.

dewde · 2011-12-14T07:17:46Z

in agreement, sticky footer would be killer addition.

pbiggar · 2011-12-14T08:18:59Z

FWIW, I've spent a few hours trying to make an existing sticky footer implementation work with bootstrap (ryanfait's one) and it's being completely thrown off by bootstrap.

gregmoser · 2011-12-21T21:16:23Z

I also have tried and handful of different combinations of the above techniques with no simple solution. It seems to me that at this point it is clearly complex enough to build into the core and have it fully supported. Just my opinion

martinbean · 2011-12-21T21:20:33Z

What exactly are the problems people are facing trying to implement a sticky footer with Bootstrap? I haven't try myself yet but don't see why it would be so difficult?

pbiggar · 2011-12-21T21:33:39Z

@martinbean: I think people in this thread are looking for two different things

Some want the footer to be properly "sticky" at all time, kinda like facebook's footer. Somewhere that chat and notifications can sit.
Others want it to only be sticky when the content is smaller than the page, and to move down otherwise. This would be used to create a company footer, like the github one at the bottom of this page.

ryanfait's, listed above, does the latter, but is broken by bootstrap. I couldn't make it work - I think because of the 100% in the body, and the offsets and margins used by bootstrap. (I'm sorry I have no more details, I've forgotten it).

@dteoh's implementation above, I think, does the former, and I got it to work with a bit of hacking after hours of trying to make ryanfait's one work. But this is not ideal - it covers content, which is not what my company footer should do.

martinbean · 2011-12-21T21:37:19Z

For a fixed footer (i.e. Facebook's) you just need to replicate the styles used in .topbar but obviously set bottom: 0; instead of top: 0;. I've done it before in a project.

For a 'sticky' footer (i.e. Ryan Fait's) I'm not sure without having a crack at it myself. I'll see if I can find some time in the next couple of days to have a go.

dvanderbeek · 2011-12-22T00:08:20Z

I have a version of the fluid layout working with a sticky footer in my fork of the bootstrap repo. It's in examples/sticky.html and requires the sticky.css file in addition to bootstrap.css. Does anyone see anything that could be improved there? Since the body needs padding: 0px for the sticky footer solution to work, I added a class to the container that includes padding to push the content down below the fixed topbar.

https://github.com/dvanderbeek/bootstrap/blob/master/examples/sticky-footer.html

dteoh · 2011-12-22T00:35:33Z

@dvanderbeek I played around with your solution and it seems to be working nicely with and without the topbar.

mokagio · 2012-01-21T11:19:16Z

@dvanderbeek your link goes to a 404, and I didn't find the file in your repo -I am kinda new to GitHub browsing-, could you please update it?

Thanks.

dvanderbeek · 2012-01-22T03:15:21Z

I think I overwrote my whole bootstrap repo to clean it up because I had overwritten a lot of stuff and wanted the newest updates from the main repo. I just added a sticky footer example that I believe is the same as what I had before. Available here: https://github.com/dvanderbeek/bootstrap/blob/master/examples/sticky.html

mokagio · 2012-01-22T09:17:38Z

I worked out a solution myself, but thanks anyway :) May be I will post it here with the others as soon as I will catch up with some work deadlines.

Cheers.

HashNuke · 2012-01-29T13:27:49Z

Sticky footer would be a really useful addition to Bootstrap.

li9ht · 2012-01-31T01:09:20Z

+1

marceloverdijk · 2012-02-01T09:15:12Z

+1

There is already a .navbar-fixed-top, so why not a .navbar-fixed-bottom?

henrikbjorn · 2012-02-01T09:16:50Z

Would mena that dropdown should also do dropup

gregmoser · 2012-02-01T16:26:15Z

This isn't about having a "fixed" navbar, it is about having the footer always at the very bottom of the page. If you screen is 1000px tall, and you only have 100px of content at the top, the 200px footer you have should still be at the bottom of the screen so that you don't end up with 700px of white below the footer

manuelbrunner · 2012-02-03T22:02:56Z

+1

origin1tech · 2012-09-13T15:25:15Z

You don't need the "spacer". although Martins solution works fine its less
trouble if you don't use that technique. Scroll up and you'll see my
solution in there somewhere. In short:

two tricks to it. make the wrapper min-height: 100%; Make body, html {
height: 100%; }. for the footer whatever its height is make that the
padding for the body take that same number and make the margin for the
footer a neg. amt. scroll up I explained it in detail.

On Thu, Sep 13, 2012 at 8:19 AM, Martin Bean [email protected]:

@rikas https://github.com/rikas Glad you got it sorted, although I'm
not too sure what you mean by a "spacer div"?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/306#issuecomment-8531838.

micahalcorn · 2012-09-21T23:20:10Z

I have tried several of the solutions presented above, and my issue is with the 20px body padding imposed by Responsive Bootstrap. Applying negative left and right margins to the footer causes a horizontal scroll. Any suggestions, other than overriding this manually with javascript when the responsive layout is triggered?

I love Bootstrap, but I would vote to have this feature added. People like me don't know the appropriate way to do things. Convention over configuration. If a simple fixed navbar warrants inclusion, I would expect a sticky footer (particularly because of the 20px padding issue - caused by Bootstrap).

Yohn · 2012-09-22T02:37:04Z

@micahalcorn an easy way to do have a sticky foot would be to do something like the following..

Make sure this goes right before the </body> tag, and is not nested within anykind of .container, or any other kind of div for that matter

<footer class="page-footer">
    <div>Content here would be your floating footer element, the paddings on the div in css keep it off the sides</div>
</footer>

footer.page-footer {
    border-top:1px solid #ccc;
    background:#fff;
    width:100%;
    position:fixed;
    top: auto;
    bottom: 0;
}
footer.page-footer div {padding:10px 50px;}

micahalcorn · 2012-09-22T04:13:55Z

@Yohn position: fixed; is not what we want. See 12 months of preceding dialogue. @martinbean is correct that the solution is simple, except for the 20px right and left body padding created with responsive layout.

martinbean · 2012-09-24T11:28:27Z

Just to let every one know, I've updated my Bootstrap with Sticky Footer example page at http://www.martinbean.co.uk/bootstrap/sticky-footer/ to work nicely with responsive layouts.

koenpunt · 2012-09-24T12:30:24Z

@martinbean Your implementation causes that there is always a scrollbar, or at least in Chrome..

martinbean · 2012-09-24T12:35:05Z

@koenpunt I developed it in Chrome. There’s a vertical scrollbar because the content exceeds the page length. The sticky footer works as required with less content.

barryvdh · 2012-09-24T12:43:38Z

@martinbean You have 2x #wrap, instead of #push and #wrap in your sample.

martinbean · 2012-09-24T12:55:18Z

@barryvdh Yeah, noticed a mark-up issue. Should be fixed now, with an option to toggle the code (code's hidden by default to display sticky footer implementation).

micahalcorn · 2012-09-25T01:44:31Z

@martinbean if you give your footer a background, you can see that the 20px body padding is enforced when you reduce the window size. Here is a screenshot => https://github.com/micahalcorn/images/blob/master/ss.png

martinbean · 2012-09-25T15:08:09Z

@micahalcorn Easily solved by applying negative left and right margins to the footer, and adding left and right padding to re-indent the content, as per the updated link: http://www.martinbean.co.uk/bootstrap/sticky-footer/

micahalcorn · 2012-09-25T15:25:01Z

@martinbean I was attempting this without the @media condition, which resulted in a horizontal scrollbar. Simple enough, thanks so much.

thezoggy · 2012-09-27T05:50:32Z

@martinbean fyi your sample code does not match up with example css. you have a #wrap not #push in the bottom div before the footer. you dont use '#footer' but 'footer'. etc

martinbean · 2012-09-27T06:49:53Z

@thezoggy Does the implementation work for you though when you amend those couple of things though?

thezoggy · 2012-09-27T08:51:50Z

@martinbean yes

martinbean · 2012-09-27T08:54:38Z

@thezoggy Cool. I’ve updated the sample code. Thanks for pointing that out.

mtanvir · 2012-09-27T09:25:28Z

@martinbean you should submit your code to http://bootsnipp.com/submit in addition to keep advertising it here. It would really help some people.

At this point, it's clear it would be very tricky to add sticky footer component to Bootstrap that works in all scenario without javascript. Someone suggested earlier in this thread that your code should be added to Bootstrap docs, +1 for that.

martinbean · 2012-09-27T09:28:50Z

Thanks, @mtanvir. I'll submit to Bootsnipp later today.

As for including the code in the Bootstrap docs, I'll leave it up to @fat and @markdotto to decide that. If they do though, then I'm more than happy to write something up.

mdo · 2012-10-01T05:10:22Z

Added as an example in 2.1.2-wip after Martin emailed me about it. Thanks folks!

dpineda · 2012-11-07T16:57:50Z

Thank you very much! I read the full post to come here:

http://twitter.github.com/bootstrap/examples/sticky-footer.html

saulshanabrook · 2012-11-08T01:55:15Z

It would be a nice to have a note in the documentation on if/how this is compatible with static/floating navs

Siyfion · 2012-12-06T10:04:57Z

I agree with @saulshanabrook, it would be nice to have an example / documentation regarding use with a fixed navbar included as well.

jarrettv · 2012-12-06T14:52:09Z

.fixed-footer {bottom:0; left:0; position:fixed; height:50px; width:100%; margin:0; padding:10px}

aligajani · 2012-12-06T14:53:15Z

You should use the sticky footer supplied in 2.2.1

Sent from my iPhone

On 6 Dec 2012, at 02:52 PM, Jarrett Vance [email protected] wrote:

.fixed-footer {bottom:0; left:0; position:fixed; height:50px; width:100%; margin:0; padding:10px}

—
Reply to this email directly or view it on GitHub.

guido4000 · 2013-01-04T13:47:14Z

It comes with the current bootstrap template. No CSS manipulation needed.
in HAML
%footer.navbar.navbar-fixed-bottom
%nav.navbar-inner
.container
= render 'layouts/footer'

e-oz · 2013-02-13T08:10:55Z

@jarrettv thank you!

renevall · 2013-04-11T04:13:08Z

Just want to say thank you Martin and everyone in this discussion

mdo closed this as completed Oct 4, 2011

dellsystem mentioned this issue Jan 30, 2012

Upgrade to bootstrap 2.0 dellsystem/wikinotes#114

Closed

twbs locked and limited conversation to collaborators Jun 14, 2014

Sticky footer #306

Sticky footer #306

Comments

hugovincent commented Sep 25, 2011

pkneale-ce commented Sep 26, 2011

dvanderbeek commented Sep 28, 2011

pkneale-ce commented Sep 29, 2011

mdo commented Oct 4, 2011

mattruma commented Nov 14, 2011

JanDupal commented Nov 25, 2011

martinbean commented Nov 25, 2011

JanDupal commented Nov 25, 2011

dvanderbeek commented Nov 25, 2011

martinbean commented Nov 25, 2011

dvanderbeek commented Nov 25, 2011

dteoh commented Nov 26, 2011

dewde commented Dec 14, 2011

pbiggar commented Dec 14, 2011

gregmoser commented Dec 21, 2011

martinbean commented Dec 21, 2011

pbiggar commented Dec 21, 2011

martinbean commented Dec 21, 2011

dvanderbeek commented Dec 22, 2011

dteoh commented Dec 22, 2011

mokagio commented Jan 21, 2012

dvanderbeek commented Jan 22, 2012

mokagio commented Jan 22, 2012

HashNuke commented Jan 29, 2012

li9ht commented Jan 31, 2012

marceloverdijk commented Feb 1, 2012

henrikbjorn commented Feb 1, 2012

gregmoser commented Feb 1, 2012

manuelbrunner commented Feb 3, 2012

origin1tech commented Sep 13, 2012

micahalcorn commented Sep 21, 2012

Yohn commented Sep 22, 2012

micahalcorn commented Sep 22, 2012

martinbean commented Sep 24, 2012

koenpunt commented Sep 24, 2012

martinbean commented Sep 24, 2012

barryvdh commented Sep 24, 2012

martinbean commented Sep 24, 2012

micahalcorn commented Sep 25, 2012

martinbean commented Sep 25, 2012

micahalcorn commented Sep 25, 2012

thezoggy commented Sep 27, 2012

martinbean commented Sep 27, 2012

thezoggy commented Sep 27, 2012

martinbean commented Sep 27, 2012

mtanvir commented Sep 27, 2012

martinbean commented Sep 27, 2012

mdo commented Oct 1, 2012

dpineda commented Nov 7, 2012

saulshanabrook commented Nov 8, 2012

Siyfion commented Dec 6, 2012

jarrettv commented Dec 6, 2012

aligajani commented Dec 6, 2012

guido4000 commented Jan 4, 2013

e-oz commented Feb 13, 2013

renevall commented Apr 11, 2013