Aligning inputs on bootstrap using the Fluid Grid

Question

I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.

<form action="/subscriptions" method="post">
  <fieldset>
    <div class="control-group">
       <label class="control-label" for="name">Name</label>
       <div class="controls row-fluid">
          <input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
          <input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
       </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email</label>
      <div class="controls row-fluid">
      <input class="span4" id="email" name="email" type="email">
    </div>
   </div>
 </fieldset>
</form>​

http://jsfiddle.net/sguha095/v4amX/

Answer 1

First we need to clean up the HTML a bit, there is an extra closing div on the first line.

I just added some classes to improve the styling so you could see how it works. The input-block-level class is a bootstrap mixin to force inputs to act like true block level elements. That's needed if you want this to be clean and to leverage the benefits of CSS. If you want to do all of your styling with HTML, then you can do so with more markup and less semantic methods, but I would recommend against it.

Hope this helps!

http://jsfiddle.net/kY5LL/12/

Answer 2

Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/

I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.

Hope this is what you were looking for.