Twitter Bootstrap horizontal form elements on a line

Question

I want some of my elements to be horizontal on a line but my bootstrap skills are not enough for this.

  <div class="tab-pane fade" id="create">
    <div class="modal-header">
        <h1 class="text-center" id="login-tit">Register</h1>
    </div>
    <form id="tab">
        <div class="form-group">
            <label class="reg-form-left">First Name</label>
            <input type="text" class="form-control" >
        </div><br />
        <div class="form-group" style="margin-top:-22px;">
          <label class="reg-form-left">Last Name</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Email</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Password</label>
          <input type="text" value="" placeholder="6 - 20 characters" class="form-control">
        </div>
        <div class="form-group">
          <label class="reg-form-left">Password again</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="control-group">
          <label class="reg-form-left control-label">Street/Nr</label>
          <div class="controls-row">
            <div class="controls col-sm-8">
              <input type="text" value="" class="form-control">
            </div>
            <div class="controls col-sm-1">
              <p style="font-size:24px;">/</p>
            </div>
            <div class="controls col-sm-3">
              <input type="text" value="" class="form-control">
            </div>
          </div>
        </div>
        <div class="form-group col-xs-5">
          <label class="reg-form-left">Postal code/City</label>
          <input type="text" value="" class="form-control">
        </div>
        <div class="form-group col-xs-6">
           <input type="text" value="" class="form-control">
        </div>
        <div class="register-btn">
          <button class="btn btn-primary">Create Account</button>
        </div>
      </form>
    </div>

I have this form:

But I want this:

It would be very nice if someone could help me to achieve what I want.

Answer 1

You need to know few things first -

• Every time you use floats or similar CSS positioning, it affects the following elements as now the positions for new elements are not defined.
• When ever you use col-* attribute it adds default padding to the element. For alignments, you need to wrap your content in row first to avoid this issue.

Here's the fix to the final few lines of your code

<div class="control-group">
  <label class="reg-form-left control-label">Street/Nr</label>
  <div class="controls-row">
    <div class="row">
      <div class="controls col-sm-8">
        <input type="text" value="" class="form-control">
      </div>
      <div class="controls col-sm-1">
        <p style="font-size:24px;">/</p>
      </div>
      <div class="controls col-sm-3">
        <input type="text" value="" class="form-control">
      </div>
    </div>
  </div>
</div>
<div class="form-control">
  <div class="row">
    <div class="form-group col-xs-5">
      <label class="reg-form-left">Postal code/City</label>
      <input type="text" value="" class="form-control">
    </div>
    <div class="form-group col-xs-6">
       <input type="text" value="" class="form-control">
    </div>
    <div class="register-btn">
      <button class="btn btn-primary">Create Account</button>
    </div>
  </div>
</div>