Twitter Bootstrap 3 Sticky Footer

J

Jon

just add the class navbar-fixed-bottom to your footer.

<div class="footer navbar-fixed-bottom">

this is not the same as sticky footer

If you have header and footer, you loose too much space on a mobile device.

@strattonn that is what media queries are for

This works perfectly if page doesn't need a scroll. But the footer overlaps with more content on the page. Any workaround on this? Thanks!

not sure about the overlap problem, but does adding margin/padding not solve the issue?

B

BenG

Referring to the official Boostrap3 sticky footer example, there is no need to add <div id="push"></div>, and the CSS is simpler.

The CSS used in the official example is:

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#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;
}

and the essential HTML:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        
      </div>
    </div>

    <div id="footer">
      <div class="container">
       
      </div>
    </div>
</body>

You can find the link for this css in the sticky-footer example's source code.

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

Full URL : https://getbootstrap.com/docs/3.4/examples/sticky-footer/sticky-footer.css

The HTML & CSS in the official sticky-footer example is now quite different from what is described here e.g. no 'wrap' div used anymore.

a

anataliocs

Here is a method that will add a sticky footer that doesn't require any additional CSS or Javascript other than what's already in Bootstrap and won't interfere with your current footer.

Example here: Easy Sticky Footer

Just copy and paste this directly into your code. No fuss no muss.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>

Very nice and quick. Can be responsive as well. But there's a need to add some additional space at the bottom of the page content so that it's not hidden by the footer. The space should have the height equal to the footer height. Can you show how to best do that? BTW "doesn't require any CSS" is technically wrong. It should be "doesn't require any additional CSS other than Bootstrap classes".

I love that this leverages what is existing in bootstrap. I couldn't get the other top answers to work but pasting this in my page and bam, sticky footer. Thanks!

m

mb21

In addition to the CSS you just added, remember you need to add the push div before closing the wrap div

The basic structure for the HTML is

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Live view
Edit view

If the page content is bigger than the available display, the footer will be pushed down. I would like the footer to really get sticked to the bottom (like navbar-fixed-bottom)

hey @delavnog, would something like this work for you? codepen.io/panchroma/pen/wMXWpY . The only important bits for you are the HTML at line 647 and the CSS

@delavnog , same idea with minimal content on page codepen.io/panchroma/pen/JGZKqy

Thanks, that's great! Now, if I could get the main div centered vertically between nav and footer, that would be awesome! Editted your codepen: codepen.io/anon/pen/rxKMaW (I had to add a margin to the body, because the nav is eating up the top of the content)

@delavnog , here's a start if the main body isn't too high. It would take more work though for longer content: codepen.io/panchroma/pen/vLrXMq

L

Leniel Maccaferri

Here's the Sticky Footer simplified code as of today because they're always optimizing it and this is GOOD:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Perfect solution. That's what I was looking for.

Unfortunately this footer has size fixed. Sometimes, when footer is dynamic it can be bigger or smaller than its height in css.

i

iMil

I'm a bit late on the subject but I came across this post as I've just been bitten by that question and finally found a really easy way to get over it, simply use a navbar with the navbar-fixed-bottom class enabled. For example:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

I like the simplicity and effectiveness of your answer, which by the way is an intelligent answer. Many answers to the same issue are full of jquery, and complicated stuff. Thanks man.

Its half a solution, you still need to take care of the overlaps of the content on your page if you resize it.

@Baldráni No its a full solution, overlaps work fine if you use Bootstrap row and col in the footer html (which is what you should do anyway)

This is not a sticky footer. It's a fixed bottom navbar that's only suitable for navbar content, and overlaps the page content.

z

z atef

Here is my updated solution to this issue.

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

And use it like this:

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Or

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}

This is not a good solution because your footer is fixed which means that it overlaps page content (if any). Try adding a few some text<br> lines before the footer and size down the window.

@user2041318: yep thats horrible... thanks for pointing this up.

This has been corrected as per jmarceli comment. The footer is no longer fixed.

K

Kal

The sticky example doesn't work for me. My solution:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}

Simple, good old fashioned CSS. Job done. I find it amusing how convoluted some of the higher-rated answers are. Isn't Bootstrap supposed to make our lives easier? 😂

I

Igor Ivancha

The push div should go right after the wrap, NOT within.. just like this

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>

C

CodeCaster

Answered by the OP:

Add this to your CSS file.

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

S

Sterner

I wanted a flexible sticky footer, which is why I came here. Top answers got me in the right direction.

The current (2 Oct 16) Bootstrap 3 css Sticky footer (Fixed size) looks like this:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

As long as the footer has a fixed size, the body margin-bottom creates a push to allow a pocket for the footer to sit in. In this case, both are set to 60px. But if the footer is not fixed and exceeds 60px height, it will cover your page content.

Make Flexible: Delete the css body margin and footer height. Then add JavaScript to get the footer height and set the body marginBottom. That is done with the setfooter() function. Next add event listeners for when the page first loads and on resizing that run the setfooter. Note: If you footer has an accordion or anything else that triggers a size change, without a resize of window, you must call the setfooter() function again.

Run the snippet and then fullscreen to demo it.

Page content

line 3

line 5

line 7

K

Konstantin Schubert

This has been solved by flexbox, once and forever:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

The HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

The CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

f

fdrv

Simple js

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Update #1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});

k

kshirish

To Summarize all of these, just keep one thing in your mind that everything except footer should have min-height: 100% or little less.

F

Fred K

I write my simplified sticky footer code with padding using LESS. This answer is probably off-topic because the question doesn't talk about padding, so if you're interested check this post for more details.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}

C

Community

Based on Jek-fdrv's answer, I added an .on('resize', function() to make sure it works on every device and every resolution:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});

C

CJ Catalano

The current version of bootstrap doesn't seem to work for this function anymore. If you download their sticky-footer-navbar example and place a large amount of content in the main body area the footer will get pushed down past the bottom of the viewport. It isn't sticky at all.

t

tao

Here is a CSS based solution for a fully responsive variable-height sticky footer. Advantage: footer allows variable height, as height no longer needs to be hard-coded in CSS.

body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } body > * { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } body > nav + .container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Reset CSS and some footer styling. Only needed on StackOverflow */ body { padding: 50px 0 0; margin: 0; } footer { background-color: #f8f8f8; padding: 15px 0 5px; border-top: 1px solid #e7e7e7; }

You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.

And here is the un-prefixed SCSS (for gulp/grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}

k

kentor

Just use flex! Make sure to use body and main in your HTML and it's one of the best solutions (unless you need IE9 support). It doesn't require a fixed height or similiar.

That's recommended for Materialize as well!

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

e

equivalent8

in Haml & Sass words all that is necessary:

Haml for app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass for app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

based on http://getbootstrap.com/examples/sticky-footer-navbar/

j

jmarceli

If yout want to use bootstrap build in classes for the footer. You should also write some javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

It will prevent content overlapping by the fixed footer, and it will adjust the padding-bottom when the user changes the window/screen size.

In the script above I assumed that footer is placed directly inside the body tag like that:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

This is definitely not the best solution (because of the JS which could be avoided), but it works without any issues with overlapping, it is easy to implement and responsive (height is not hardcoded in CSS).

G

Gpak

#myfooter{ height: 3em; background-color: #f5f5f5; text-align: center; padding-top: 1em; }

How is this sticky at the bottom?

P

Peter Girnus

Here is a very simple and clean sticky footer you can use in bootstrap. Totally Responsive!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Example: CodePen Demo

This solution will shift the footer bar to right when opening bootstrap modal due to absolute positioning !

b

bustawin

Using flexbox is the easiest way I have found, from the guys of CSS-tricks. This is true sticky-footer, it works when the content is < 100% of the page and > 100% of the page:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

And CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Note that this is bootstrap-agnostic, so it works with bootstrap and without it.

I

Ikram - Ud - Daula

You can simply try adding a class on your footer navbar:

navbar-fixed-bottom

Then create a CSS named custom.css and body padding like this..

body { padding-bottom: 70px; }

v

vijoy

Html

<footer class="footer navbar-fixed-bottom">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

CSS

.footer {
    position: fixed;
    bottom: 0;
}

Hello and welcome to SO! While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read the tour, and How do I write a good answer? In addition, did you check that those solutions do not exist in the 25 other solutions to this question?

Twitter Bootstrap 3 Sticky Footer

Responsive sticky footer of any height

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US