Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing.

I want to have a footer like this sample. Sample

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.

Any guide will be very much appreciated.

EDIT:

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.

This is what i have now for my navbar

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

Solution

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.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    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 */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

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