title: Bootstrap form not lining up correctly
body: <p>Just starting out with Bootstrap. I want a form that lines up like the one on the w3 schools site: <a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_basic&amp;stacked=h" rel="nofollow noreferrer">http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_basic&amp;stacked=h</a></p>
  
  <p>However, mine doesn't line up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
      &lt;h2&gt;foo View&lt;/h2&gt;
      &lt;form&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="fooName"&gt;Name:&lt;/label&gt;
              &lt;input class="form-group" id="fooName" type="text" value="fbdshfjdhk"/&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="fooghk"&gt;ghk:&lt;/label&gt;
              &lt;input class="form-group" id="fooghk" type="text" value="fdsfdsfds"/&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="fooXyz"&gt;Xyz:&lt;/label&gt;
              &lt;input class="form-group" id="fooXyz" type="text" value="ffdhfjhdsjk"/&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body
  &lt;/html&gt;
  </code></pre>