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>

Why is there no answer marked as correct for this question? – Tim B James Apr 19 '17 at 08:10 — Tim B James, Apr 19 '17 at 08:10

score 58 · Answer 1 · answered May 21 '15 at 10:29

58

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.

answered May 21 '15 at 10:29

Tim B James

20,084
4
73
103

15

or would you say the "left" answer... haha – Tim B James Oct 31 '16 at 16:59
1

5 years later I truly believe this should be marked as the correct answer. – Antonio González Apr 16 '21 at 00:49
@AntonioGonzález thanks! Crazy it was 5 years ago! – Tim B James Apr 22 '21 at 14:48

score 40 · Answer 2 · edited Nov 11 '21 at 14:32

40

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

edited Nov 11 '21 at 14:32

Nimantha

6,405
6
28
69

answered Jan 11 '13 at 03:01

David Taiaroa

25,157
7
62
50

1

Updated the html and fixed the alignment of the submit button: http://jsfiddle.net/n3f25Lkd/ – ganders Apr 07 '15 at 17:35
I wouldn't recommend modifying a framework's source code directly, especially if you want to be able to keep it up to date – that is, unless you are willing to fork the repository and merge upstream code back in. – djule5 May 14 '17 at 15:31
agreed that it's not a great idea to modify a frameworks source code @djule5, what I was suggesting is to add the above to the site's CSS so that it overrides the Bootstrap styling. Then you can update Bootstrap and not lose the customization, does that make sense? – David Taiaroa May 14 '17 at 18:42

score 4 · Answer 3 · answered Dec 17 '14 at 20:32

4

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

answered Dec 17 '14 at 20:32

Ruben Benjamin

707
9
9

2

I would recommend never to use !important if there is an alternative: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – cederlof Nov 12 '15 at 08:39
Please use the solution by Tim B James below. important! is a bad practice – Ruben Benjamin Dec 10 '15 at 18:38

score 1 · Answer 4 · answered Mar 04 '15 at 15:59

1

"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.

answered Mar 04 '15 at 15:59

AlpharettaTechy

350
2
14

"but you need to make sure you have 12 columns in each row as well, otherwise you will have issues" -- not true. If you have less than 12 columns defined, then your data will only consume the columns that you have defined, then the remaining columns will be blank. So, if you define a col-x-4, col-x-5, col-x-1, then the remaining 2 columns will be empty, and everything should work just fine. (Note, if you define MORE than 12 columns, then everything after the 12th column will wrap to the next line) – ganders Apr 07 '15 at 17:30

score 1 · Answer 5 · answered May 03 '17 at 15:19

1

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

answered May 03 '17 at 15:19

Bruno Ciconelle

86
7

eww! avoid inline styles like this at all cost! While it would work, it's bad practice, embedding styles into the html muddies the clear separations between data (html) and presentation rules (css). – Shawson May 24 '18 at 11:07

score 1 · Answer 6 · answered Mar 03 '21 at 19:43

1

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

answered Mar 03 '21 at 19:43

AtLeastTheresToast

327
6
18

score -3 · Answer 7 · answered Apr 22 '16 at 15:32

-3

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

answered Apr 22 '16 at 15:32

Laser One Jim

15
4

How do I left align these Bootstrap form items?

7 Answers7

Linked