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.
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 */
}
