Bootstrap 3 Flush Footer to Bottom. Not Fixed

Bootstrap 3 Flush footer to bottom. not fixed

See the example below. This will position your Footer to stick to bottom if the page has less content and behave like a normal footer if the page has more content.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE: New version of Bootstrap demonstrates how to add sticky footer without adding a wrapper. Please see Jboy Flaga's Answer for more details.

Flushing footer to bottom of the page, twitter bootstrap

Found the snippets here works really well for bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Making footer stay at bottom with Bootstrap 3

You were almost there, the one thing it lacks is setting the parent with a relative position:

body {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 50px;
    margin-top: 0;
    position: relative;
}

And then you can make sure that it stays always there by adding a negative value to bottom. E.g.:

footer {
    background-color: #f5f5f5;
    bottom: -100px;
    height: 60px;
    position: absolute;
    width: 100%;
}

Btw, you don't need to add margins to the <body>, since all the content is in it :)

Edit

After reviewing a while, the solution above would be enough if bigger screens with higher heights were not considered...

The problem was that the middle container itself didn't fill the entire space, making the footer appear in the middle.

Therefore, instead of using position: absolute or fixed for the footer (or even to the <body>), the solution was to adjust the height of that same middle container to the height of the window by this:

<script>
  $('body>.container').height(
    $(window).height()-
    $('body>.container-fluid').height()-
    $('body>footer').height()
  );
</script>

Setting the middle container's to the window's height removing the upper container's and footer's height places the footer in the correct position.

Also for the footer itself this rule comes in handy: footer{overflow: hidden}, just in case the contents/inner spacings of the footer overflow it.

Getting a footer to stick to the bottom with bootstrap 3

This works for me in Bootstrap 3.3.1

<div class="container">
    [...]
</div>
<footer class="footer">
  <div class="container">
    <p class="text-muted">my footer</p>
  </div>
</footer>

make sure the footer tag is outside the container div

you need the sticky-footer.css too which is here

Edit:

To do what you're asking in the comments, have you tried this?:

<footer class="footer">
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="container">
                <span>testing</span>
            </div>
        </div>
    </div>
</footer>

Also you need to tweak the css class for .footer:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 60px; */
    background-color: #f5f5f5;
}

Bootstrap footer doesn't stick to the bottom of the page

Don't use the fixed-bottom class in the footer and try this instead. You may need to adjust the values a bit instead of using 160px.

html {
  position: relative;
  min-height: 100%;
  padding-bottom:160px;
}
body {
  margin-bottom: 160px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
}

How to stick footer to bottom of the page, without using fixed

First thing, for footer, you need to use <footer class="footer"></footer> if you're using bootstrap.

You can also have a separate component for footer if you're using react.

In html, css

Bootstrap footer at the bottom of the page

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.

The above links should be helpful

Bootstrap 3 Flush Footer to Bottom. Not Fixed