title: Bootstrap 4: Footer not at bottom
body: <p>I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me. </p>
  
  <p>I tried these answers for example:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/30198350/bootstrap-footer-not-at-bottom">Bootstrap footer not at bottom</a></li>
  <li><a href="https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap">Flushing footer to bottom of the page, twitter bootstrap</a></li>
  <li><a href="https://stackoverflow.com/questions/23046801/height-not-100-on-container-fluid-even-though-html-and-body-are">Height not 100% on Container Fluid even though html and body are</a></li>
  </ul>
  
  <p>But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.</p>
  
  <p>This is the code for my footer:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"&gt;
  &lt;footer class="d-flex justify-content-center"&gt;
    &lt;div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5"&gt;
      &lt;div class="align-left"&gt;
        &lt;a class="font-weight-bold small kf-blue kf-links" href="#"&gt;Link1&lt;/a&gt; |
        &lt;a class="font-weight-bold small kf-blue kf-links" href="/"&gt;Link2&lt;/a&gt; |
        &lt;a class="font-weight-bold small kf-blue kf-links" href="/"&gt;Link3&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="align-right small"&gt;
        Crafted with Love by &lt;a class="font-weight-bold kf-blue kf-links" href="#" target="_blank"&gt;Me&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:</p>
  
  <p><a href="https://codepen.io/anon/pen/oMZVxq" rel="noreferrer">https://codepen.io/anon/pen/oMZVxq</a></p>
  
  <p>Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.</p>