Flushing footer to bottom of the page, twitter bootstrap

Question

I am generally familiar with the technique of flushing a footer using css.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

Before test all answers below keep in mind the OP wants to have it working with twitter bootstrap.As it is not a must, twitter bootstrap works with Jquery,what means it is Javascript enabled.For that reason just test my answer: http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap/20971428#20971428 — HenryW, Jan 07 '14 at 12:22
Official example : http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css — user, Feb 25 '15 at 07:20
Link is broken! Can anyone please fix the official example link? — PassionInfinite, Apr 09 '19 at 14:10
@PassionInfinite https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/ it may become older version in future because of 4.0 i guess. — Ammad Khalid, May 03 '20 at 21:48
Link to latest version https://getbootstrap.com/docs/5.1/examples/sticky-footer/ — groundh0g, Nov 06 '21 at 12:31
9 years old. still a huge problem. why is it so complicated to flush a footer to the bottom of a page? — BenKoshy, Feb 21 '22 at 08:03

score 514 · Answer 1 · edited Nov 02 '18 at 13:07

514

This is now included with Bootstrap 2.2.1.

Bootstrap 3.x

Use the navbar component and add .navbar-fixed-bottom class:

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

Bootstrap 4.x

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

Don't forget to add body { padding-bottom: 70px; } or otherwise the page content may be covered.

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

edited Nov 02 '18 at 13:07

Mahmoud Fayez

3,398
2
19
36

answered Nov 13 '12 at 17:26

sanon

6,403
2
21
26

35

@ChuanYeong Unfortunately there is no `navbar-static-bottom`. – Lawrence Woodman Dec 18 '12 at 14:22
1

@LawrenceWoodman Uugh just realized that. My mistake. Turns out I've more or less implemented sticky footer before putting in navbar-static-bottom. So I thought the class actually works..holy crap. Oh and, navbar-fixed-bottom isn't really what the OP was asking for anyway – Chuan Yeong Dec 19 '12 at 03:34
29

@MikeCurry he not asked about a fixed footer, but a one that "fills" the empty space, if your page don't have enough content to make the footer stays at bottom. If your footer is only informational, a fixed one is only taking valuable space. – rdlu Feb 15 '13 at 14:47
He says he is not able to flush the footer to the bottom of the page, which is what this technique does. – sanon Feb 18 '13 at 16:36
23

This is not sticky footer, because it is used position:fixed; which is not right – Furkat U. Jul 10 '13 at 14:46
11

Yep this solution only flushes to the bottom of the viewport not the bottom of the page. i.e. the footer is always visible. – rism Oct 23 '13 at 20:48
4

Had to downvote the answer because it give confusion.The OP not wants a sticky footer. – HenryW Jan 07 '14 at 11:32
I am using Bootstrap `v3.3.1`, and still there is no `navbar-bottom` for **sticky behaviour**. Two `div`s are the way to go (didn't downvote as this answer is still useful). – xyz May 26 '15 at 15:55
This one gives fixed footer so be careful if you don't want sticky footer. Use http://stackoverflow.com/a/12701056/128028 (accepted answer) for non-sticky footer. – Viet Aug 11 '16 at 20:34
this worked perfectly for me , however link is not working so check this page - https://getbootstrap.com/docs/4.4/components/navbar/ – Goro May 10 '20 at 12:45
Bootstrap 5, `

© 2021 - Text Footer

` – hemanth gali Nov 09 '21 at 06:30

score 337 · Accepted Answer · edited Oct 24 '19 at 05:30

337

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;
}

edited Oct 24 '19 at 05:30

live2

3,771
2
37
46

answered Oct 03 '12 at 02:13

Chuan Yeong

3,619
1
14
10

This is the best solution I have attempted so far. Accepted this as the answer. – Calvin Cheng Oct 03 '12 at 07:19
Hi, I've implement this method, it works great but now I've got some problems with displaying page on iphone (page is zoomed in). Any ideas what is the problem? Here is some details: http://stackoverflow.com/questions/18621090/web-page-made-with-twitter-bootstrap-zoomed-in-on-iphone – pupadupa Sep 05 '13 at 10:43
119

Just in case you've read this answer and not scrolled down it's worth looking at the other answers – MattyW Sep 29 '13 at 11:05
4

especialy this one: http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap/20971428#20971428 – HenryW Jan 07 '14 at 12:24
2

This is best method I have found for Bootstrap. For device responsiveness remember to use media queries to update #main and .footer heights for different screen sizes – SyntaxGoonoo Jun 09 '14 at 03:38
a big problem with this is you are assigning a height to the footer so it is no longer responsive. you need to let the content set the height. and control the change to 100% width for each column at the specific media query with your padding and margin – John Ruddell Feb 04 '15 at 21:22
How about giving padding-bottom:150px; to #wrap instead of #main ? – Silver Moon Oct 17 '15 at 03:58
You could use relative units for the height of the footer if device responsiveness is needed, like em for example: http://www.w3schools.com/cssref/css_units.asp – Sylwester Gryzio May 16 '16 at 21:06
This is the best answer that does not force sticky footer. Works great with Bootstrap! – Viet Aug 11 '16 at 20:32
The links are broken nowadays. – maracuja-juice Oct 08 '17 at 20:34
Incase using HAML please use the this code it works like charm `%footer.card.text-center` – Sunil Kumar Jun 21 '18 at 17:17
Flexible footer height, vanilla Boostrap, no JS solution: https://stackoverflow.com/a/61623350/5459567 – Kathandrax May 05 '20 at 21:41

score 87 · Answer 3 · edited May 24 '19 at 05:15

87

A working example for Twitter bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Version that always updates in case user opens devtools or resizes window.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

You need at least an element with a `#footer`

When not want the scrollbar if content would fit to screen just change the value of 10 to 0
The scrollbar will show up if content not fits to screen.

edited May 24 '19 at 05:15

Kelvin Wang

627
5
21

answered Jan 07 '14 at 12:17

HenryW

3,551
1
23
23

1

Alternatively, to have the footer stay in place and flush to the bottom, change `margin-top` to `padding-bottom` in the JS. – kevinrutherford Jun 25 '14 at 09:15
10

Yeah, I went with this one too. CSS can be so stupid sometimes. Not that it's impossible, but general purpose solutions can be hard to come by, and fixing annoying things like this in our layouts shouldn't take trips to stack exchange, multiple gist revisions, cross-browswer testing, and eventual surrender to a simple JS trick. Yeah, I feel a bit dirty, but at least it works. – meecect Oct 22 '14 at 22:20
4

every single solution I've looked at is wrong. This is the ONLY one that actually does what it's supposed to do - stick the footer to the bottom of the page, without obscuring any content if the browser is resized. – Dave Oct 24 '14 at 22:19
13

it didnt work quiet as well as expected for me, still, one of the better answers, i fixed my issue by replacing `$('#footer').height();` with `$('#footer').outerHeight();` – DarkMukke Sep 04 '15 at 00:58
4

Great answer! I had a couple adaptations that I think improve it here: http://stackoverflow.com/a/36385654/8207 – Cory Apr 03 '16 at 12:54
7

The best answer I've found. If you want it to work after window resize just put the main code from the answer inside `$(window).resize(function() {//main code goes here});` and invoke `$(window).resize();` to set it when page loads. – Szymon Sadło Aug 22 '16 at 19:48
1

Tried 4 of the solutions on this page and nothing was working for me except this. – justinl Jan 18 '17 at 05:36
1

It will not adjust on window resize, so put the code in a function, call it once, then call it on window resize events: $(window).on("resize", etc.... – ScottyB Sep 25 '18 at 22:27
i dont know why i need to change the 10 to 40. theres a gap – ji-ruh Jun 21 '21 at 15:42
In my opinion, the best solution in the history of humanity !!! – Morteza Barati Jun 03 '22 at 04:17

score 38 · Answer 4 · edited Apr 19 '18 at 22:23

38

For Sticky Footer we use two DIV's in the HTML for basic sticky footer effect. Write like this:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

edited Apr 19 '18 at 22:23

YakovL

7,557
12
62
102

answered Apr 11 '12 at 03:39

sandeep

91,313
23
137
155

8

He said he's using Twitter Bootstrap. What would be the easiest way of integrating this into Bootstrap without completely rewriting the HTML? – Cody Gray - on strike Apr 11 '12 at 03:53
1

If OP want's to achieve Sticky Footer effect then he have to change his MarkUp – sandeep Apr 11 '12 at 03:59
Thank you! This has been the only method that has actually worked for me in an ASP.NET MVC5 site that uses Bootstrap. +1 – Yann Duran Apr 23 '14 at 16:22

Leniel Maccaferri · Answer 5 · 2014-01-29T13:36:46.870

Here's how to implement this from the official page:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

I just tested it right now and it WORKS GREAT! :)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

The relevant CSS code is this:

/* 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

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

Thanks for posting this, it was definitely the best solution (not to mention the only one that worked) for my particular project, and of course it's nice that it's directly from the project itself. — Cory W., Apr 02 '13 at 03:11
I don't know what the deal was, but I couldn't get it to work without adding a scroll to the pages. I ended up changing the .wrapper CSS so the min-height was "calc(100% - 120px)" where the 120px is the height of my footer and removed the
from the html since it didn't seem to be doing anything aside from adding height to the page I didn't need. — jammyman34, Mar 02 '16 at 00:49

score 31 · Answer 6 · answered Feb 25 '15 at 07:18

Much simpler official example: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Mohamed Ali JAMAOUI · Answer 7 · 2019-04-20T11:28:20.650

31

In the latest version of bootstrap 4.3, this can be done using .fixed-bottom class.

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

Here's how I use it with the footer:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

You can find more information in the position documentation here.

edited Apr 20 '19 at 11:28

answered Sep 10 '17 at 18:32

Mohamed Ali JAMAOUI

14,275
14
73
117

1

This still works with the official 4 version unleashed. – klewis Jun 25 '18 at 16:01
Note that the example at http://getbootstrap.com/docs/4.1/examples/sticky-footer has a line-height=60px style on the footer element. This is not only unnecessary, it also prevents the footer from working properly if it's the parent of one or more div elements, which is commonly the case. – ScottyB Sep 28 '18 at 12:50

score 31 · Answer 8 · edited Jun 01 '20 at 08:33

31

Use the flex utilities built into Bootstrap 4! Here's what I've come up with using mostly Bootstrap 4 utilities.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

.d-flex to make the main div a flex container
.flex-column on the main div to arrange your flex items in a column
min-height: 100vh to the main div, either with a style attribute or in your CSS, to fill the viewport vertically
.flex-grow-1 on the container, element to have the main content container take up all the space that remains in the viewport height.

edited Jun 01 '20 at 08:33

ikonuk

575
8
19

answered May 25 '19 at 19:35

EGhost57

311
3
5

8

Instead of `min-height: 100vh` the `min-vh-100` class from Bootstrap can be used. – ikonuk May 31 '20 at 18:46
4

This solution worked great including the min-vh-100 suggestion from @ikonuk – TGR Jun 16 '20 at 07:48
3

I just wanted to say THANK YOU! – Paschalis Jul 05 '20 at 07:27
1

Thank you so much for this answer! I've tried it here: [link](https://car-listing-project-staging.herokuapp.com/user/login) However, I needed to set the style as the `min-vh-100` class didn't work for me. Any idea why? – VFR292 Jul 14 '21 at 13:11

Rasaf Ibrahim · Answer 9 · 2021-08-24T08:31:07.647

Keep the footer at the bottom by using Bootstrap 5


    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">
     
         <div> <!-- Wrapper (Without footer) -->
       
            <header>
             I am a header.
            </header>
      
            <article>
            I am an article!
            </article>
       
        </div> <!-- End: Wrapper (Without footer) -->
     
     
         <footer>
         I am a footer.
         </footer>
     
    </div>

Live Demo in CodePen

Note

Make sure that you are wrapping everything in a <div> or any other block-level element with the following Bootstrap classes: min-vh-100, d-flex,flex-column,justify-content-between .
Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element.
Make sure that you using <footer> or any other block-level element to wrap the footer.

Code Explanation

min-vh-100 ensures that the body element will stretch to at least the full height of the screen
flex-column keeps the behavior of normal document flow in terms of retaining stacked block elements (which assumes direct children of the body are all indeed block elements).
justify-content-between pushes the footer to the bottom of the screen.

Check out how to do the same (Keeping the footer at the bottom) with just CSS - Link

Maxim Shoustin · Answer 10 · 2017-07-13T07:23:25.483

22

Well I found mix of navbar-inner and navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

It seems good and works for me

enter image description here

See example in Fiddle

edited Jul 13 '17 at 07:23

answered Apr 21 '13 at 20:17

Maxim Shoustin

77,483
27
203
225

2

simplest and most elegant solution. Be leery of home brewing your own css code as it will not be backwards compatible with bootstrap – 1-14x0r Aug 15 '13 at 18:12
I used this, and had a problem on an old android (froy maybe?) with pages that were shorter than the screen. Otherwise it worked well on FF, Chrome, IE11, iPhone, nexus 7. – bnieland Nov 09 '13 at 20:20
Perfect and extremely simple! – ramires.cabral Mar 23 '17 at 11:43

score 15 · Answer 11 · edited May 23 '17 at 12:18

HenryW's answer is good, though I needed a few tweaks to get it working how I wanted. In particular the following also handles:

Avoiding the "jumpiness" on page load by first marking invisible and setting visible in javascript
Dealing with browser resizes gracefully
Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page
Height function tweaks

Here's what worked for me with those tweaks:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

sp_omer · Answer 12 · 2016-11-16T14:48:37.857

12

This worked for me perfectly.

Add this class navbar-fixed-bottom to your footer.

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

I used it like this:

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

And it sets to bottom over the the full width.

Edit: This will set footer to always visible, it's something you need to take in consideration.

edited Nov 16 '16 at 14:48

answered Nov 16 '16 at 14:34

sp_omer

291
4
12

score 10 · Answer 13 · answered Apr 11 '12 at 14:17

You need to wrap your .container-fluid div in order for your sticky footer to work, you're also missing some properties on your .wrapper class. Try this:

Remove the padding-top:70px from your body tag and include it in your .container-fluid instead, like so:

.wrapper > .container-fluid {
    padding-top: 70px;
}

We have to do this because pushing the body down to accommodate the navbar ends up pushing the footer a bit further (70px further) past the viewport so we get a scrollbar. We get better results pushing the .container-fluid div instead.

Next we have to remove the .wrapper class outside your .container-fluid div and wrap your #main div with it, like so:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Your footer of course has to be out of the .wrapper div so remove it from the `.wrapper div and place it outside, like so:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

After thats all done, properly push your footer closer to your .wrapper class by using a negative margin, like so:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

And that should work, though you're probably going to have to modify a few other things to make it work when the screen is resized, like resetting the height on the .wrapper class, like so:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

score 9 · Answer 14 · answered Feb 06 '13 at 18:09

This is the right way to do it with Twitter Bootstrap and the new navbar-fixed-bottom class: (you have no idea how long I spent looking for this)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Kathandrax · Answer 15 · 2020-05-05T21:36:01.297

6

Bootstrap v4+ solution

Here's a solution that doesn't require rethinking the HTML structure or any additional CSS trickery involving padding:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Note that this solution allows for footers with flexible heights, which particularly comes in handy when designing pages for multiple screen sizes with content wrapping when shrunk.

Why this works

style="height:100%;" makes the <html> tag take the whole space of the document.
class d-flex sets display:flex to our <body> tag.
class flex-column sets flex-direction:column to our <body> tag. Its children (<header>, <main>, <footer> and any other direct child) are now aligned vertically.
class h-100 sets height:100% to our <body> tag, meaning it will cover the entire screen vertically.
class flex-grow-1 sets flex-grow:1 to our <main>, effectively instructing it to fill any remaining vertical space, thus amounting to the 100% vertical height we set before on our <body> tag.

Working demo here: https://codepen.io/maxencemaire/pen/VwvyRQB

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information on flexbox.

edited May 05 '20 at 21:36

answered May 05 '20 at 21:25

Kathandrax

914
14
26

`h-100` class doesn't work properly, it is better to use `min-vh-100`. – ikonuk May 31 '20 at 18:43
@ikonuk What exactly do you mean by "doesn't work properly"? Please elaborate. – Kathandrax Jun 02 '20 at 11:51
Because `h-100` class always depends on the parent elements height and may not work on some cases properly. Since we want footer at the bottom of the viewport it would be a good practice to use viewport height. – ikonuk Jun 02 '20 at 21:09
Again, define 'some cases'. Your argument about the parent dependency applies just the same to `min-width`. Which is why the `HTML` tag has a `height` of 100% in the code. The example works and I don't see why it wouldn't given the [cross-browser support for the CSS `height` property](https://caniuse.com/#feat=minmaxwh), which is ultimately what the Bootstrap snippet translates into. – Kathandrax Jun 04 '20 at 00:14
1

I didn't say your example doesn't work. Not everyone uses the style in the `HTML` tag. In my case, your solution didn't work since I don't prefer using the style in the `HTML` tag. And I don't want the `body` tag depends on another parent but viewport. You don't have to put `style="height:100%;"` and `h-100` at the same time. Putting `min-vh-100` to the body simply does the job and less code. – ikonuk Jun 04 '20 at 10:40

score 4 · Answer 16 · answered Feb 23 '16 at 08:47

4

Use the navbar component and add .navbar-fixed-bottom class:

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

add body

  { padding-bottom: 70px; }

answered Feb 23 '16 at 08:47

Admin File3

119
10

score 4 · Answer 17 · answered Jul 20 '19 at 00:10

Per the Bootstrap 4.3 example, in case you're losing your sanity like I did, this is how it actually works:

All parents of the footer div need to have height: 100% (h-100 class)
The direct parent of the footer needs to have display: flex (d-flex class)
The footer needs to have margin-top: auto (mt-auto class)

The problem is that in modern front-end frameworks we often have additional wrappers around these elements.

For example in my case, with Angular, I composed the view from a separate app root, main app component, and footer component - all of which added their custom element to the DOM.

So, to make it work, I had to add classes to these wrapper elements: an additional h-100, moving the d-flex one level down, and moving the mt-auto one level up from the footer (so actually it's not on the footer class anymore, but on my <app-footer> custom element).

+1 for "The **direct** parent of the footer needs to have `d-flex` class". I had another `
` in the hierarchy between the `d-flex` one and the `footer`.. — Magnus, Nov 07 '22 at 07:47

score 3 · Answer 18 · answered Aug 15 '13 at 19:50

to handle width constraint layouts use the following so that you do not get rounded corners, and so that your nav bar will be flush to the sides of the application

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

then you can use css to override the bootstrap classes to adjust height, font, and color

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

score 3 · Answer 19 · answered Jun 18 '14 at 06:32

You can use jQuery to handle this:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

score 3 · Answer 20 · answered Jun 29 '15 at 20:19

The simplest technique is probably to use Bootstrap navbar-static-bottom in conjunction with setting the main container div with height: 100vh (new CSS3 view port percentage). This will flush the footer to the bottom.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

score 3 · Answer 21 · answered Jul 08 '17 at 16:09

3

Tested with Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

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

answered Jul 08 '17 at 16:09

Dušan Maďar

9,269
5
49
64

score 2 · Answer 22 · answered Apr 17 '15 at 20:38

2

The only one that worked for me!:

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

answered Apr 17 '15 at 20:38

Ricardo

21
1

score 1 · Answer 23 · answered Jul 20 '13 at 11:49

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

The footer height matches the size of the bottom indent of the wrap element.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

originalhat · Answer 24 · 2014-09-30T21:18:57.040

1

Keep it simple.

footer {
  bottom: 0;
  position: absolute;
}

You may need to also offset the height of the footer by adding a margin-bottom equivalent to the footer height to the body.

edited Sep 30 '14 at 21:18

answered Jan 12 '14 at 01:09

originalhat

1,676
16
18

score 1 · Answer 25 · answered Apr 10 '19 at 02:32

Here's a solution for the newest version of Bootstrap (4.3 at time of writing) using Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

And a codepen example: https://codepen.io/tillytoby/pen/QPdomR

score 1 · Answer 26 · answered Apr 20 '20 at 10:25

1

Use this piece of code in bootstrap it's works

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

answered Apr 20 '20 at 10:25

sanjay

695
11
22

score 0 · Answer 27 · answered Apr 11 '12 at 07:55

0

It looks like the height:100% 'chain' is being broken at div#main. Try adding height:100% to it and that may get you closer to your goal.

answered Apr 11 '12 at 07:55

brains911

1,310
7
5

Hannes · Answer 28 · 2014-06-27T10:18:39.107

0

Here you'll find the approach in HAML ( http://haml.info ) with navbar on top and footer at the bottom of the page:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

edited Jun 27 '14 at 10:18

answered Dec 02 '12 at 22:59

Hannes

2,451
2
18
11

Could you elaborate on your answer a bit? Code-only answers are generally discouraged. – Qix - MONICA WAS MISTREATED Jun 25 '14 at 20:08
1

Okay, what do you want to know? – Hannes Jun 26 '14 at 13:41
I don't need to know it, but someone coming to this site later might not know exactly *why* your answer's code does what it does. – Qix - MONICA WAS MISTREATED Jun 26 '14 at 19:02
Probably I should delete it. I wrote a new intro. :) – Hannes Jun 27 '14 at 10:20

score 0 · Answer 29 · answered Oct 10 '14 at 17:41

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

score 0 · Answer 30 · answered Jan 05 '15 at 23:16

0

This is how bootstrap does it:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Just use page source and you should be able to see. Don' forget the <div id="wrap"> an the top.

answered Jan 05 '15 at 23:16

Bren

3,516
11
41
73

score 0 · Answer 31 · answered May 09 '16 at 10:59

another possible solution, just using media queries

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

score 0 · Answer 32 · answered May 28 '18 at 11:36

0

Use the below class to push it to last line of the page and also make it to center of it. If you are using ruby on rails HAML page you can make use of the below code. %footer.card.text-center

Pls don't forget to use twitter bootstrapp

answered May 28 '18 at 11:36

Sunil Kumar

388
5
15

score 0 · Answer 33 · answered Feb 16 '20 at 15:43

0

this works well

html

<footer></footer>

css

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

answered Feb 16 '20 at 15:43

TemiTope Yankey

59
7

score -1 · Answer 34 · answered Sep 25 '19 at 10:40

HTML

<div id="wrapper">

  <div id="content">
    <!-- navbar and containers here -->
  </div>

  <div id="footer">
   <!-- your footer here -->
  </div>

</div>

CSS

html, body {
  height: 100%;
}

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

#content {
  padding-bottom: 100px; /* Height of the footer element */
}

#footer {
  width: 100%;
  height: 100px; /* Adjust to the footer needs */
  position: absolute;
  bottom: 0;
  left: 0;
}

score -1 · Answer 35 · answered Oct 15 '19 at 05:33

-1

This one is the best!

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

answered Oct 15 '19 at 05:33

Camilo

9

3

Do you mind to bother explaining what is happening in the css code? – tafaust Oct 15 '19 at 05:39

Flushing footer to bottom of the page, twitter bootstrap

35 Answers35

You need at least an element with a `#footer`

Keep the footer at the bottom by using Bootstrap 5

Note

Code Explanation

Bootstrap v4+ solution

Why this works

Linked

Flushing footer to bottom of the page, twitter bootstrap

35 Answers35

You need at least an element with a #footer

Keep the footer at the bottom by using Bootstrap 5

Note

Code Explanation

Bootstrap v4+ solution

Why this works

Linked

You need at least an element with a `#footer`