title: Bootstrap 3 Flush footer to bottom. not fixed
body: <p>I am using Bootstrap 3 for a site I am designing.</p>
  
  <p>I want to have a footer like this sample.
  <a href="http://wrapbootstrap.com/preview/WB0B348C6" rel="noreferrer">Sample</a></p>
  
  <p>Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it to be always at the bottom of the content and also be responsive.</p>
  
  <p>Any guide will be very much appreciated.</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>Sorry if I wasn't clear.
  What happens now is that when the content body does not have enough content. My footer moves up and then it leaves an empty space at the bottom.</p>
  
  <p>This is what i have now for my navbar</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-4"&gt;
                      &lt;h5 id='footer-header'&gt; SITEMAP &lt;/h3&gt;
                      &lt;div class="col-sm-4" style="padding: 0 0 0 0px"&gt;
                          &lt;p&gt;News&lt;/p&gt;
                          &lt;p&gt;contact&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-4" style="padding: 0 0 0 0px"&gt;
                          &lt;p&gt;FAQ&lt;/p&gt;
                          &lt;p&gt;Privacy Policy&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4"&gt;
                      &lt;h5 id='footer-header'&gt; xxxx &lt;/h3&gt;
                      &lt;p&gt;yyyyyyyyyyyyy&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4"&gt;
                      &lt;h5 id='footer-header'&gt; xxxxx &lt;/h3&gt;
                      &lt;p&gt;uuuuuuuuuuuuuuu&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.navbar-bottom {
  min-height: 300px;
  margin-top: 100px;
  background-color: #28364f;
  padding-top: 35px;
  color:#FFFFFF;
  }
  </code></pre>