title: Bootstrap inline form button alignment
body: <p>Button <strong>alignment</strong> after <strong>validation</strong> not proper.</p>
  
  <pre><code>&lt;form class="form-inline form-padding"&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input class="form-control" placeholder="First Name" name="firstname" type="text" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input class="form-control" placeholder="Last Name" name="lastname" type="text" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                  &lt;button type="submit" id="form-button" class="btn btn-primary"&gt;Load&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>Validation code:</strong></p>
  
  <pre><code>$('form').validate({
          rules: {
              firstname: {
                  minlength: 3,
                  maxlength: 15,
                  required: true
              },
              lastname: {
                  minlength: 3,
                  maxlength: 15,
                  required: true
              }
          },
          highlight: function(element) {
              $(element).closest('.form-group').addClass('has-error');
          },
          unhighlight: function(element) {
              $(element).closest('.form-group').removeClass('has-error');
          },
          errorElement: 'span',
          errorClass: 'help-block',
          errorPlacement: function(error, element) {
              if(element.parent('.input-group').length) {
                  error.insertAfter(element.parent());
              } else {
                  error.insertAfter(element);
              }
          }
      });
  </code></pre>
  
  <p>The form works great, but the moment i click on Load button the alignment of button is not proper. I could not create a fiddle, i have attached the screen-shot of the same.</p>
  
  <p><strong>Before Form Submission</strong>
  <img src="https://i.stack.imgur.com/hFgmh.png" alt="Before Form Submition"></p>
  
  <p><strong>After Form Submission</strong>
  <img src="https://i.stack.imgur.com/XC8mJ.png" alt="enter image description here"></p>
  
  <p>Button <strong>alignment</strong> after <strong>validation</strong> not proper.</p>