184

I am using Bootstrap 3 for a site I am designing.

I want to have a footer like this sample. Sample

Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it to be always at the bottom of the content and also be responsive.

Any guide will be very much appreciated.

EDIT:

Sorry if I wasn't clear. What happens now is that when the content body does not have enough content. My footer moves up and then it leaves an empty space at the bottom.

This is what i have now for my navbar

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
j08691
  • 204,283
  • 31
  • 260
  • 272
user3169403
  • 2,051
  • 2
  • 15
  • 17
  • Do you have example code you've been working on that is giving you a problem? – badAdviceGuy Jan 24 '14 at 04:23
  • It seems like regular footer, if you don't want Fixed, you can update the style. What issue you are running into? – Mutant Jan 24 '14 at 04:23
  • When it is the last thing in your HTML, it will always be on the bottom. Confusing question that needs a code example to understand what the problem is. – Joe Conlin Jan 24 '14 at 04:27
  • http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height – davidpauljunior Jan 24 '14 at 04:41
  • @davidpauljunior: Those are sticky footers which is not what I am looking for – user3169403 Jan 24 '14 at 04:44
  • @user3169403 it's not `position: fixed`. It makes the content have a min-height of 100%. "...it sticks at the bottom of the page only if all other content of the page does not occupy the full height of the page" – davidpauljunior Jan 24 '14 at 04:47
  • @davidpauljunior: I tried it. But it doesn't work on responsively. When I use a mobile phone to view. The background-colour does not cover my entire footer. – user3169403 Jan 24 '14 at 05:00
  • JBoy's answer from the Bootstrap docs / examples should be the accepted answer. – Richard Morgan Jan 27 '15 at 18:59
  • JBoy's answer does not solve the problem if you are trying to use columns in your footer. As @user3169403 indicated, this method results in the background color of the footer not covering its contents when resized to small devices. This method is great if you do not have any columns and only simple text, like a copyright. Very frustrating, this should be easier to figure out in Bootstrap. – NightMICU Jul 20 '15 at 17:53

13 Answers13

324

There is a simplified solution from bootstrap here (where you don't need to create a new class): http://getbootstrap.com/examples/sticky-footer-navbar/

When you open that page, right click on a browser and "View Source" and open the sticky-footer-navbar.css file (http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css)

you can see that you only need this 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;
}

for this HTML

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

        <footer class="footer">
        </footer>
    </body>
</html>
jflaga
  • 4,610
  • 2
  • 24
  • 20
  • 20
    This (from the Bootstrap docs / examples) should be the accepted answer. – Richard Morgan Jan 27 '15 at 18:58
  • 5
    For me this does not work because my footer is rather tall. It's great if you just want a paragraph but mine has several columns - using this method, I end up with a margin under the footer when I go down to smaller sizes – NightMICU Jul 15 '15 at 19:03
  • This worked for me only when I removed the height attribute in the footer class. – dbr Oct 06 '15 at 02:36
  • 9
    Isnt this Bootstraps sticky footer solution? I dont think the OP meant this. For me, with a long page my footer appeared at the bottom of the screen but not at the bottom of the content (ie over the content). I had to change Position: absolute; to relative (in .footer class) for this to work. – tinmac May 02 '16 at 16:56
  • 25
    This would be the correct answer if this topic did not have "not fixed" in the title... – ruudy May 24 '16 at 15:48
  • This would work as shown IF the HTML footer element contained a div with a class of container element inside it. – Drew May 04 '17 at 14:52
  • In addition to @TinoMclaren's comment, I also want to add that you don't have to add a `margin-bottom: ` attribute in the `html` (if you have changed `.footer`'s `position` to `relative`) because it will create a space below your footer. Correct me if I'm wrong. (Works with Bootstrap 4 Beta) – Larra Sep 18 '17 at 16:13
  • 1
    this only works for footers with fixed size, I prefer the solution of Philip Walton as proposed by @ChristopherTan which is super slim and independent of the footer's height – buergi May 24 '18 at 21:40
  • This should be the accepted answer for static height headers. – atereshkov Jan 27 '20 at 14:45
127

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.

Surjith S M
  • 6,642
  • 2
  • 31
  • 50
17

use flexbox as you can use it at your disposal. The solution offered by bootstrap 4 still hunting overlap content in responsive layout, e.g: it will break in mobile view, i come across the most neat trick is to use flexbox solution demo shown at here:(https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/) this way we do not have to deal with fixed height issue which is an obsolete solution by now...this solution works for bootstrap 3 and 4 whichever you using.

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

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

.Site-content {
  flex: 1;
}
Christopher Tan
  • 235
  • 2
  • 9
14

UPDATE: This does not directly answer the question in its entirety, but others may find this useful.

This is the HTML for your responsive footer

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

For the CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOTE: At the time of the posting for this question the above lines of code does not push the footer below the page content; but it will keep your footer from crawling midway up the page when there is little content on the page. For an example that does push the footer below the page content take a look here http://getbootstrap.com/examples/sticky-footer/

Rex Charles
  • 1,292
  • 1
  • 16
  • 33
  • This is actually a bad solution, as the footer covers up the main content when they meet. You need to set the `padding-bottom` of the main content container equal to the height of the footer. And you need to do it dynamically on page `load` and `resize` events and also on footer `DOMSubtreeModified`. – tao Sep 22 '16 at 06:24
9

For people still struggling and the answered solution doesn't work quite as you want it to, here is the simplest solution I have found.

Wrap your main content and assign it a min view height. Adjust the 60 to whatever value your style needs.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Thats it and it works pretty well.

eGlu
  • 697
  • 11
  • 22
  • I had the same issue as the one in question. After trying almost all highly ranked answers here, this was the only one that worked for me. And it worked in all sizes. Only change i made was "min-height:70vh". This will depend on your site's header and footer sizes. – Arfath Dec 07 '17 at 11:39
  • This should be higher, works exactly like requested. – yam Mar 22 '18 at 19:22
  • This worked for my needs. Just tweak the min-height value until you get the desired outcome. – Ken Sawyerr Mar 28 '18 at 21:40
  • Wonderful, this is the most simple and efficient solution to the footer placement problem! – Prahlad Yeri Jul 02 '19 at 14:52
5

Galen Gidman has posted a really good solution to the problem of a responsive sticky footer that does not have a fixed height. You can find his full solution on his blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
  • 1,117
  • 1
  • 14
  • 24
4

For a pure CSS solution, scroll after the 2nd <hr>. The first one is the initial answer (given back in 2016)

The major flaw of the solutions above is they have a fixed height for the footer.
And that just doesn't cut it in the real world, where people use a zillion number of devices and have this bad habit of rotating them when you least expect it and **Poof!** there goes your page content behind the footer!

In the real world, you need a function that calculates the height of the footer and dynamically adjusts the page content's padding-bottom to accommodate that height. And you need to run this tiny function on page load and resize events as well as on footer's DOMSubtreeModified (just in case your footer gets dynamically updated asynchronously or it contains animated elements that change size when interacted with).

Here's a proof of concept, using jQuery v3.0.0 and Bootstrap v4-alpha, but there is no reason why it shouldn't work on lower versions of each.

jQuery(document).ready(function($) {
  $.fn.accomodateFooter = function() {
    var footerHeight = $('footer').outerHeight();
    $(this).css({
      'padding-bottom': footerHeight + 'px'
    });
  }
  $('footer').on('DOMSubtreeModified', function() {
    $('body').accomodateFooter();
  })
  $(window).on('resize', function() {
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />', {
        text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
      }))
      .append($('<hr />'));
  }
});
body {
  min-height: 100vh;
  position: relative;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Feed that footer - not a game (yet!)</h1>
    <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
    <hr />
    <blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
  </div>
</div>

<footer>I am a footer with dynamic content.
  <hr />
</footer>

Initially, I have posted this solution here but I realized it might help more people if posted under this question.

Note: I have purposefully wrapped the $([selector]).accomodateFooter() as a jQuery plugin, so it could be run on any DOM element, as in most layouts it is not the $('body')'s bottom-padding that needs adjusting, but some page wrapper element with position:relative (usually the immediate parent of the footer).

Later edit (3+ years after initial answer):

At this point I no longer consider acceptable using JavaScript for positioning a dynamic content footer at the bottom of the page. It can be achieved with CSS alone, using flexbox, lightning fast, cross-browser.

Here it is:

// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)

function addMoreContentToFooter() {
  var f = $('footer');
  f.append($('<p />', {
      text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
    }))
    .append($('<hr />'));
}
.wrapper {
  min-height: 100vh;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
}

.wrapper>* {
  flex-grow: 0;
}

.wrapper>main {
  flex-grow: 1;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  width: 100%;
  padding: 1.5rem;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <main>
    <div class="container">
      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
        <hr />
        <blockquote class="lead">
          <strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
        </blockquote>
      </div>
    </div>
  </main>
  <footer>I am a footer with dynamic content.
    <hr />
  </footer>
</div>
tao
  • 82,996
  • 16
  • 114
  • 150
3

This method uses minimal markup. Just put all your content in a .wrapper which has a padding-bottom and negative margin-bottom equal to the footer height (in my example 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

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

</body>
Vin
  • 1,975
  • 5
  • 27
  • 34
3

Or this

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
Anjan Biswas
  • 7,746
  • 5
  • 47
  • 77
1

For Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
shilovk
  • 11,718
  • 17
  • 75
  • 74
  • 2
    The question specifically states that `navbar-fixed-bottom` is NOT what solves the problem. – p4sh4 Feb 03 '16 at 05:32
1

None of these solutions exactly worked for me perfectly because I used navbar-inverse class in my footer. But I did get a solution that worked and Javascript-free. Used Chrome to aid in forming media queries. The height of the footer changes as the screen resizes so you have to pay attention to that and adjust accordingly. Your footer content (I set id="footer" to define my content) should use postion=absolute and bottom=0 to keep it at the bottom. Also width:100%. Here is my CSS with media queries. You'll have to adjust min-width and max-width and add or remove some elements:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
Brian Edwards
  • 413
  • 7
  • 15
1

This is what worked for me using Flexbox:

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

.body-content {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    flex: none;
}

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

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
0

Use any class and make it's height fixed. It solved my issue.

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

CSS:

.container{
    min-height: 60vh;
}
Sagor Chowdhuri
  • 233
  • 2
  • 5