Your sticky footer is correct. Your bootstrap columns usage is wrong…
Bootstrap uses the container as just a wrapper div to control the width of you content part and also to provide a gutter around your content.
Col-xs-, col-sm- etc., – These are just floating elements with certain widths in percentage. Since these divs are floated, their correct heights will be calculated only when it has a “row” around it.
row – has clearfix ( CSS clear) specified in it. so that col-* height can be calculated
YOU MUST have a row around your columns
<div class="row"> <form class="col-xs-12"></form> </div>
Here is a working fiddle