Grid system made footer go too much up to the top of a page

Question

I created a registration form using twitter bootstrap 3. It look the way I want but the footer is not on its place. How can I make be at the bottom where it should?

Here is my "layout" (main template):

.container
  .row
    != yield
    %hr
    != haml :'shared/_footer'

where != yield is place holder for the content of /registration page. And here is its content:

.col-lg-4.col-lg-offset-4
  .well
    %legend Create your account

    %form{role: :form, action: '/signup', method: :post}
      - if @return_url
        %input{type: :hidden, name: :return_url, value: @return_url}
      .row
        %label.col-xs-4{for: :email} Email
        .col-xs-8
          %input.form-control{id: :email, name: :email, type: :email}
      .row
        %label.col-xs-4{for: :password} Password
        .col-xs-8
          %input.form-control{type: :password, name: :password, id: :password}
      .row
        .col-xs-8.col-lg-offset-4
          %button.btn.btn-primary.btn-block{type: :submit} Create Account
  .clearfix

Answer 1

It looks like you missed adding <div class="row"> inside of the .container before adding your columns. I'd give this a shot first giving you the following code.

<div class="container">
   <div class="row">
     <div class="col-lg-4 col-lg-offset-3">
       ...
     </div>
   </div>
</div>
<hr>
<footer>
   ...
</footer>

Alternatively

Since nothing in life is ever easy, it could also be that you have some elements in your form (Position absolute and floated elements) that aren't being counted in the calculation of height on the div above the footer.

If this is the case, adding a <div class="clearfix"></div> before the closing tag of the main div should do it.

Result should look something like this..

<div class="col-lg-4 col-lg-offset-3">
   ...
   <div class="clearfix"></div>
</div>
<hr>
<footer>
   ...
</footer>

Answer 2

Try using something like this

#footer {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 50px;
   background-color: #111;
}