title: Align form to the left in bootstrap
body: <p>I'm creating a contact page which currently looks like this:<br />
  <a href="https://i.stack.imgur.com/gc895.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gc895.jpg" alt="have" /></a></p>
  <p>But I want it to look like this:<br />
  <a href="https://i.stack.imgur.com/o114O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o114O.png" alt="Want" /></a></p>
  <p>How do I accomplish this? I had a look around on the bootstrap website but couldn't really find a good example.
  I just started using bootstrap so I'm completely new to it.</p>
  <p>My code right now:</p>
  <pre><code>    &lt;div class=&quot;container&quot;&gt;
      &lt;form class=&quot;well form-horizontal&quot; action=&quot; &quot; method=&quot;post&quot;  id=&quot;contact_form&quot;&gt;
          &lt;fieldset&gt;
  
          &lt;!-- Form Name --&gt;
          &lt;legend style=&quot;font-weight: bold;&quot;&gt;Neem contact op&lt;/legend&gt;
          &lt;div class=&quot;container&quot; style=&quot;margin-bottom: 15px&quot;&gt;
          &lt;h4 style=&quot;font-weight: bold; &quot;&gt; Gegevens&lt;/h4&gt;
              &lt;span style=&quot;font-weight: bold;&quot;&gt;Naam:&lt;/span&gt; test&lt;br&gt;
              &lt;span style=&quot;font-weight: bold;&quot;&gt;Woonplaats:&lt;/span&gt; test &lt;br&gt;
              &lt;span style=&quot;font-weight: bold;&quot;&gt;Adres:&lt;/span&gt; test &lt;br&gt;
              &lt;span style=&quot;font-weight: bold;&quot;&gt;Postcode:&lt;/span&gt; test &lt;br&gt;
              &lt;span style=&quot;font-weight: bold;&quot;&gt;Telefoon:&lt;/span&gt; test &lt;br&gt;
          &lt;/div&gt;  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot;&gt;Voornaam&lt;/label&gt;  
            &lt;div class=&quot;col-md-4 inputGroupContainer&quot;&gt;
            &lt;div class=&quot;input-group&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-user&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input  name=&quot;first_name&quot; placeholder=&quot;First Name&quot; class=&quot;form-control&quot;  type=&quot;text&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot; &gt;Achternaam&lt;/label&gt; 
              &lt;div class=&quot;col-md-4 inputGroupContainer&quot;&gt;
              &lt;div class=&quot;input-group&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-user&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input name=&quot;last_name&quot; placeholder=&quot;Last Name&quot; class=&quot;form-control&quot;  type=&quot;text&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text input--&gt;
                 &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot;&gt;E-Mail&lt;/label&gt;  
              &lt;div class=&quot;col-md-4 inputGroupContainer&quot;&gt;
              &lt;div class=&quot;input-group&quot;&gt;
                  &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-envelope&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input name=&quot;email&quot; placeholder=&quot;E-Mail Address&quot; class=&quot;form-control&quot;  type=&quot;text&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot;&gt;Telefoon&lt;/label&gt;  
              &lt;div class=&quot;col-md-4 inputGroupContainer&quot;&gt;
              &lt;div class=&quot;input-group&quot;&gt;
                  &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-earphone&quot;&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;input name=&quot;phone&quot; placeholder=&quot;06-12345678&quot; class=&quot;form-control&quot; type=&quot;text&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Text area --&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot;&gt;Bericht&lt;/label&gt;
              &lt;div class=&quot;col-md-4 inputGroupContainer&quot;&gt;
              &lt;div class=&quot;input-group&quot;&gt;
                  &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-pencil&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;textarea class=&quot;form-control&quot; name=&quot;comment&quot; placeholder=&quot;Project Description&quot;&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Button --&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;col-md-4 control-label&quot;&gt;&lt;/label&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-warning&quot; &gt;Verstuur &lt;span class=&quot;glyphicon glyphicon-send&quot;&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;/fieldset&gt;
          &lt;/form&gt;
          &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>