Twitter Bootstrap - Inline Form

Question

I have this form:

<!-- First Name-->
    <div class="control-group">
      <label class="control-label">First Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Last Name-->
    <div class="control-group inline">
      <label class="control-label">Last Name</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Telefonnumber-->
    <div class="control-group">
      <label class="control-label">Telefonnumber</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>
    <!-- Street-->
    <div class="control-group">
      <label class="control-label">Street</label>
      <div class="controls">
        <input id="textinput" name="Product Name" class="input-xlarge" type="text"> 
      </div>
    </div>

I want to display Last Name next to First Name and under these two field the Telefonnumber.

How can I realize this in twitter bootstrap?

btw the jsfiddle

Solution

Bootstraps has a few example form layouts that you can use here.

As per their documentation, use controls-row when you want multiple on a line. (form-inline is for the whole form to be inline). You will want to read their scaffolding documentation before going forward with using their classes.

Updated jsfiddle

PS.. HTML pointers

1. Don't duplicate id (and name if you can avoid it). For example, id="textinput" should be unique across the entire page. The name doesn't have to be unique, but it's best practice to just match the id.
2. Add for attribute to labels.