Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


<footer class="row">
    <div class="panel-footer text-center">
<p>add text</p>
    </div>
  </footer>

Does not work. It only shows a gray div not flush against the bottom of the screen.

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


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>

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).

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


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

This is a very clever solution. I think that CSS has too much to offer that we don't even know how to get the most out of it.

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.

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


<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>
html,
body { height: 100%; }

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

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

.page-row-expanded { height: 100%; }

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/

This seems to be compatible with bootstrap, and hence should be the accepted answer, imho. It's not perfect, as a horizontal scrollbar seems to be appearing.

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


#footer {
    width:100%;
    height:80px;
    background-color:#000;
    background-attachment: scroll;
    background-position: 0% 0%;
    position: fixed;
    bottom: 0pt;
    left: 0pt;
}

I know this is an old post, but I must share a little secret.

I tried all the stuff posted before me and it all failed. This is the only thing that worked and it's much easier...

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    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 */
}
<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
 </div>
 <div class="footer">
   <p>Copyright (c) 2008</p>
 </div>

@user3169403 Can you show me a demo? And what's wrong in responsive mode?

If you look at this example: jsfiddle.net/mLQ2J You will see that if my view port goes down to mobile size.. the background of my footer doesn't cover the text. However, I can increase the footer height but that will look ugly in desktop view because of all the empty spaces.

Let me try to get the screenshot uploaded. Meanwhile, may I know why the push must have the same height as the footer?

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

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


/* 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;
}
<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

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

Thanks @Jboy-Flaga : This is the correct solution for me too! Upvoted.

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/

This (from the Bootstrap docs / examples) should be the accepted answer.

you can see that you only need this CSS

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


/* 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;
}
<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

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

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

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.

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/

This (from the Bootstrap docs / examples) should be the accepted answer.

This worked for me only when I removed the height attribute in the footer class.

This would be the correct answer if this topic did not have "not fixed" in the title...

you can see that you only need this CSS

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    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 */
}
<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

@HardlyNoticeable one is min-width to force the wrapper even if the content is less.

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.

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

Why are there two height property definitions in wrapper?

Note
Rectangle 27 0

html Bootstrap 3 Flush footer to bottom. not fixed?


<footer class="row">
    <div class="panel-footer text-center">
<p>add text</p>
    </div>
  </footer>

Does not work. It only shows a gray div not flush against the bottom of the screen.

Note