Twitter Bootstrap and Forms

Question

I am using Twitter Bootstrap. In the forms I can do horizontal layouts and vertical layouts but the class is on the <form> tag. So, how to I do a little of both where I want to save space and put a couple of input boxes horizontally and the rest vertically?

I have a form that looks like this:

Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]

But I want it to look something like this:

Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]

Please help with the CSS.

Here is my code:

<form class="form-horizontal">
    <fieldset>
        <div class="row-fluid"> 
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" for="Address">Mailing Address</label>
                    <div class="controls">
                        <input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="City">City</label>
                    <div class="controls">
                        <input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="State">State</label>
                    <div class="controls">
                        <input class="span2" id="state" name="State" type="text" value="UT">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="PostalCode">Zip</label>
                    <div class="controls">
                        <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Country">Country</label>
                    <div class="controls">
                        <input class="span3" id="country" name="Country" type="text" value="US">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Use CSS inline or float: left; your <div>

Mr. Alien
– Mr. Alien

2012-07-26 15:01:28 +00:00
Commented Jul 26, 2012 at 15:01 — Mr. Alien
– Mr. Alien, Commented Jul 26, 2012 at 15:01

MoJo2600 · Accepted Answer · 2012-07-30 18:50:14Z

3

This worked for me

<div class="control-group">
    <label class="control-label" for="inputPLZ">PLZ*</label>
    <div class="controls">
        <input type="text" class="input-mini" id="inputPLZ">                                        
        Ort*
        <input type="text" class="input-medium" id="inputOrt">
    </div>
</div>

It is rendered like this

enter image description here

answered Jul 30, 2012 at 18:50

MoJo2600

4093 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy · Accepted Answer · 2012-07-26 15:01:15Z

0

Wrap state, zip and country in a div, then float the child elements left and they should align. Though I have no experience with Bootstrap so don't know if that will affect anything

answered Jul 26, 2012 at 15:01

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Comments

Mike Robinson · Accepted Answer · 2012-07-26 15:10:10Z

0

Helps to understand how bootstrap is set up.

The .control-label class is the left side indicator of a form. This takes the left 140px of the form and floats left. The .controls class is the right side of container of a form, and simply applies a margin left of 160px to itself without floating.

Knowing this, you can treat Bootstrap like normal HTML. You can simply include all the inputs in the same control, like so:

<div class="control-group">
    <div class="controls">
        State: <input class="span2" id="state" name="State" type="text" value="UT">
        Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
        Country: <input class="span3" id="country" name="Country" type="text" value="US">
    </div>
</div>

If you want the alignment to match up, use a little bit of trickery by making the first label in your horizontal set the .control-label like so:

<div class="control-group">
    <label class="control-label">State:</label>
    <div class="controls">
        <input class="span2" id="state" name="State" type="text" value="UT">

answered Jul 26, 2012 at 15:10

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

1 Comment

Aaron Salazar Over a year ago

This one doesn't quite work. The input boxes are still stacked on top of each other but the labels are above each of the inputs. If I set the labels, like in your second code sample, then I get label, label, label, input, input input stacked vertically.

Collectives™ on Stack Overflow

Twitter Bootstrap and Forms

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related