title: How do I left align these Bootstrap form items?
body: <p>I'm using Bootstrap for the first time, and am having a lot of trouble aligning this form-horizontal to the left.</p>
  
  <p>The list items are horizontal, as they should be, but I want the control-labels (the Bootstrap class for form labels) to all be at the same position floated left.</p>
  
  <p>The form is contained in a div with a span of 7, as my site is two columns -- 7 and 4 columns.</p>
  
  <p>Below is my HTML. If you look under "Horizontal Forms" on this page <a href="http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms" rel="noreferrer">http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms</a>, you'll see that the labels are left aligned, but not absolutely left-aligned so that the beginning of the labels are at the same position vertically. </p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputSaving"&gt;What are you saving for?&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="description"&gt;Add a short description&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="categoryselect"&gt;Choose a Category&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;select class="span4"&gt;
                  &lt;!-- Add some CSS and JS to make a placeholder value--&gt;
                  &lt;option value="Kittens"&gt;Kittens&lt;/option&gt;
                  &lt;option value="Keyboard Cat"&gt;Keyboard Cat&lt;/option&gt;
                  &lt;option value="Twitter Bird"&gt;Twitter Bird&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="goal"&gt;Your Saving Goal&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;input type="text" class="span4" id="goal"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-large btn-primary" type="button"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>