CODEWITHSUNDEEP
htmltwitter-bootstrap
Geoffrey De Vylder
Geoffrey De Vylder

Reputation: 4153

Twitter bootstrap nesting form layouts

I am just getting started using bootstrap. I need to position three input fields to form an "address" field.

What I'm trying to achieve

I have tried using the following html:

<label for="street">Address</label>
<input class="span3" id="street" name="street" placeholder="Street"/><br/>

<input id="zipcode" class="span1 inline" placeholder="Zipcode"/>
<input id="city" class="span2 inline" placeholder="City"/>

This is almost correct but the size is a bit off

incorrect

Is there a better way to achieve this layout (without having to make custom styles to achieve the correct width)?

Upvotes: 2

Views: 5409

Answers (4)

mrogunlana
mrogunlana

Reputation: 847

So I was struggling with this for a while and finally got a solution. Here's what I came up with. This is a simple registration form with horizontal (inline) fields.

Upvotes: 0

Iurii.K
Iurii.K

Reputation: 2729

Try using the following:

<div class="container">
<div class="row">
    <div class="span6 offset1">
        <form>
            <label for="street">Address</label>
            <div class="controls controls-row">
                <input type="text" class="span3" id="street" name="street" placeholder="Street"/>
            </div>
            <div class="controls controls-row">
                <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/>
                <input type="text" id="city" class="span2" placeholder="City"/>
            </div>
        </form>
    </div>
</div>

​ Here is a fiddle

Upvotes: 10

Chandrakant
Chandrakant

Reputation: 1981

Customise gutter width and span width, I think span24 will be better for accurate widths, gutter width 10px and span1 30px span2 70px etc ....tell me that you are you using SASS or LESS

if sass 

$gridColumns: 24
$gridColumnWidth: 30px
$gridGutterWidth: 10px

in your sass file, but don't forgot to import the bootstrap sass file

And one more thing - I forgot here you should use control-group and other formatting while using twitter bootstrap; please refer on bootstrap site

Upvotes: 1

Ollie
Ollie

Reputation: 656

I thought if you just used the 'span2' & 'span1' classes without the 'inline' class it would just display the layout in the grid with the correct margins. It looks like it is the margins that are causing the misalignment.

Upvotes: 0

Related Questions