If yout want to use bootstrap build in classes for the footer. You should also write some javascript:
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
It will prevent content overlapping by the fixed footer, and it will adjust the padding-bottom when the user changes the window/screen size.
In the script above I assumed that footer is placed directly inside the body tag like that:
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
This is definitely not the best solution (because of the JS which could be avoided), but it works without any issues with overlapping, it is easy to implement and responsive (height is not hardcoded in CSS).