80

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.

I have put all my pages in a "holder"

#holder {
  min-height: 100%;
  position:relative;
}

And then used the following CSS for my footer

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

The html for my footer

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

I would like to keep the footer fluid.

6
  • 1
    well your footer's absolute position is entirely dependant on the container-divs size. So if there isn't any content in the container, it probably ends somewhere around the middle of the page and you footer positions 50px below that.
    – jakee
    Jul 19, 2012 at 7:56
  • thanks for answer, what would be a solution to get around this?
    – Richlewis
    Jul 19, 2012 at 8:14
  • Either position your footer outside the container div or force the container to have full height
    – jakee
    Jul 19, 2012 at 8:24
  • This may be what you are looking for stackoverflow.com/q/8824831/681807 Jul 19, 2012 at 9:16
  • @MyHeadHurts, it is your solution that I am using, bit think i may be having problems now as I have put the footer within a container, row and span 12
    – Richlewis
    Jul 19, 2012 at 9:23

8 Answers 8

103

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

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

Update for Bootstrap 4 -

as mentioned by Sara Tibbetts - class is fixed-bottom

<div class="footer fixed-bottom">
4
  • 13
    This created a frozen footer, with content scrolling up beneath it. Am I missing something? Thx.
    – scharfmn
    Mar 26, 2014 at 18:36
  • It makes the footer stick to bottom of screen, if thats what you mean by frozen. On a small screen it will display the footer even when there is overlapping content. Depends if you want to always show the footer
    – Jon
    Mar 26, 2014 at 19:01
  • also good to note that if you have JS generated dom ng-repeat in angular ... you will need to put margin-bottom on the wrapper for the generated elements equal to the height of the sticky footer ... bootstrap puts-margin top on the footer but the margin-top wont apply to generated dom and you will end up with the bottom of you generated dom will under the footer. Jan 7, 2016 at 17:21
  • 4
    As of Bootstrap 4, instead of navbar-fixed-bottom it is just fixed-bottom Oct 29, 2019 at 19:15
45

As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807

One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:

html,body{
    height: 100%
}

You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.

7
  • Thanks so much, i thought that the html,body height had been set, seems it wasnt, changed bottom also and voila. Thanks again
    – Richlewis
    Jul 19, 2012 at 9:52
  • apologies to ask again but i have now noticed when the viewport is decreased to say size of an iphone the footer text is overlapped by the content? any ideas?
    – Richlewis
    Jul 19, 2012 at 9:56
  • No problem. Are you applying margin-bottom: 50px to the last piece of content before the footer? If you are and it isn't working then you may have to increase this for an iPhone (not sure why you would, but it could be the case). You can do this using CSS media queries Jul 19, 2012 at 10:20
  • 1
    I see my mistake, i wasnt applying margin-bottom:50px to the content before footer like you said, set bottom to 0 and now fine, no need for a media query...PHEW!!!
    – Richlewis
    Jul 19, 2012 at 10:29
  • That is one awesome fix; Dec 27, 2013 at 6:39
13

Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:

<div class="fixed-bottom">...</div>      

Source

2
9

http://bootstrapfooter.codeplex.com/

This should solve your problem.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</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;
color:#fff;
}
2
  • thanks, what is the @renderbody() doing, i have tried this solution before and i actually get @renderbody() outputted as html?
    – Richlewis
    Jul 19, 2012 at 9:15
  • Ignore that part - it is just a function that calls the body content from other controls.
    – easwee
    Jul 19, 2012 at 9:18
6

Here is an example using css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle

1
  • Fantastic use of calc. Sadly still an issue in 2017 with custom sites that use some bootstrap functionality
    – soulshined
    Sep 23, 2017 at 21:32
6

Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.

<div class="navbar-static-bottom" id="footer"></div>
1

It could be easily achieved with CSS flex. Having HTML markup as follows:

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

Following CSS should be used:

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

Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ

0
0

I have found a simple solution for this. For body tag add <body class="d-flex flex-column min-vh-100">. On footer tag add class

mt-auto

The entire code looks as follows

<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>

This is working for bootstrap 4+ and tested till 5 beta 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.