title: Bootstrap modal-footer does not stick to bottom of modal
body: <p>I have a bootstrap model with an horizontal form, and it currently has <code>height: 80vh;</code>. I want the modal to be this large and I am happy with it. </p>
  
  <p>The problem is that the <code>modal-footer</code> is not behaving correctly. Instead of sticking to the bottom, it occupies a large portion of the space that should belong to the input fields:</p>
  
  <p><img src="https://i.stack.imgur.com/RXgqd.png" alt="enter image description here"></p>
  
  <p>I want to force the <code>modal-footer</code> to stay at the bottom, but even after reading other discussions and trying with <code>padding: 0;</code> I can't fix it. Following is a portion of the code I am using. I removed some of the input fields to make it easier to read.</p>
  
  <p>How can I fix the stuborn footer?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("a").click(function() {
      $('.modal').modal({
        show: true
      });
      return false; //prevent browser defualt behavior
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"&gt;&lt;/script&gt;
  
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;a href="#" class="btn btn-info btn-lg"&gt;Click me !&lt;/a&gt;
    
    &lt;div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"&gt;
      &lt;div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title" id="myModalLabel"&gt;Edit Package MyPackage&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;form class="form-horizontal"&gt;
              &lt;div class="control-group"&gt;
                &lt;label class="control-label"&gt;Package Name:&lt;/label&gt;
                &lt;div class="controls"&gt;
                  &lt;input type="text" class="form-control" id="package-name" placeholder="MyPackageName"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Other fields here --&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary" id="savePackageChangesBtn"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>