title: Bootstrap Responsive sticky footer
body: <p>I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.</p>
  
  <p>I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.</p>
  
  <p>Here is my html :</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
  &lt;div class="row text-center"&gt;
  
  &lt;p&gt; Blablabla &lt;/p&gt;
  
  &lt;/div&gt; &lt;!-- row --&gt;
  
  &lt;/div&gt; &lt;!-- container --&gt;
  
      &lt;div class="footer text-center"&gt;
              &lt;p class="small"&gt;Alright !&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS :</p>
  
  <pre><code>html {
   height: 100%; 
  }
  
  body {
    height: 100%; 
    padding-bottom: 30px;           
  }
  
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
  }
  </code></pre>
  
  <p>I've tried Bootstrap's column on the footer like this :</p>
  
  <pre><code>&lt;div class="col-md-12 col-xs-12"&gt;
  
      &lt;div class="footer text-center"&gt;
              &lt;p class="small"&gt;&amp;#169; 2017 Le Point G&lt;/p&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.</p>
  
  <p>Any better suggestions ?</p>