How do I left align these Bootstrap form items?

Question

I'm using Bootstrap for the first time, and am having a lot of trouble aligning this form-horizontal to the left.

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.

The form is contained in a div with a span of 7, as my site is two columns -- 7 and 4 columns.

Below is my HTML. If you look under "Horizontal Forms" on this page http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, 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.

<form class="form-horizontal">     <div class="control-group">         <label class="control-label" for="inputSaving">What are you saving for?</label>         <div class="controls">             <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">         </div>     </div>     <div class="control-group">         <label class="control-label" for="description">Add a short description</label>         <div class="controls">             <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>         </div>     </div>     <div class="control-group">         <label class="control-label" for="categoryselect">Choose a Category</label>         <div class="controls">             <select class="span4">                 <!-- Add some CSS and JS to make a placeholder value-->                 <option value="Kittens">Kittens</option>                 <option value="Keyboard Cat">Keyboard Cat</option>                 <option value="Twitter Bird">Twitter Bird</option>             </select>         </div>     </div>     <div class="control-group">         <label class="control-label" for="goal">Your Saving Goal</label>         <div class="controls">             <input type="text" class="span4" id="goal">         </div>     </div>     <button class="btn btn-large btn-primary" type="button">Submit</button> </form> 

Answer 1

Just my two cents. If you are using Bootstrap 3 then I would just add an extra style into your own site's stylesheet which controls the text-left style of the control-label.

If you were to add text-left to the label, by default there is another style which overrides this .form-horizontal .control-label. So if you add:

.form-horizontal .control-label.text-left{     text-align: left; } 

Then the built in text-left style is applied to the label correctly.

Answer 2

If you are saying that your problem is how to left align the form labels, see if this helps:
http://jsfiddle.net/panchroma/8gYPQ/

Try changing the text-align left / right in the CSS

.form-horizontal .control-label{     /* text-align:right; */     text-align:left;     background-color:#ffa; }