How do I left align these Bootstrap form items? - html

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;
}

Answer 3

Instead of altering the original bootstrap css class create a new css file that will override the default style.
Make sure you include the new css file after including the bootstrap.css file.
In the new css file do
.form-horizontal .control-label{
text-align:left !important;
}

Answer 4

"pull-left" is what you need, it looks like you are using Bootstrap 2, I am not sure if that is available, consider bootstrap 3, unless ofcourse it is a huge rework! ... for Bootstrap 3 but you need to make sure you have 12 columns in each row as well, otherwise you will have issues.

Answer 5

Just add style="text-align: left" to your label.

Answer 6

text-align:left; did not work for me but by adding display:flex; I was able to get the label to the left.

Answer 7

I was having the exact same problem. I found the issue within bootstrap.min.css. You need to change the label:
label {display:inline-block;} to label {display:block;}