CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Aaron Salazar
Aaron Salazar

Reputation: 4527

Twitter Bootstrap and Forms

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>

Upvotes: 1

Views: 6124

Answers (3)

MoJo2600
MoJo2600

Reputation: 409

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

Upvotes: 3

Mike Robinson
Mike Robinson

Reputation: 25159

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

Upvotes: 0

Andy
Andy

Reputation: 14575

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

Upvotes: 0

Related Questions