Align inputs HTML form

It's very simple, I give you an example, you must put each field in a different column.

In the example I put a .col-sm-2 for label , and .col-sm-5 for form fields; all within a .form-group

Do not forget to run and expand to see the example in full screen. Tell me if there is something you do not understand.

/* Link boostrap */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

<form class="form-horizontal">
  <div class="form-group">
    <label for="input-nombre" class="col-sm-2 control-label">Nombre</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-nombre" placeholder="Nombre">
    </div>
  </div>
  <div class="form-group">
    <label for="input-apellido" class="col-sm-2 control-label">Apellidos</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-apellido-1" placeholder="Apellido Uno">
    </div>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="input-apellido-2" placeholder="Apellido Dos">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success">Enviar formulario</button>
    </div>
  </div>
</form>

Also seeing your code:

• you are missing the class="form-control" bootstrap for each field form
• you have to use .form-group for each field with its label

This could be worth you (I have not used bootstrap): link

Try doing it following this example:

<div class="form-group">
    <div class="row">
        <div class="col-lg-offset-1 col-lg-2">
            <label for="nombre">Nombre</label>
        </div>
        <div class="col-lg-8">
            <input type="text" class="form-control" name="nombre">
        </div>
    </div>
</div>

Good luck!

Try this:

    <form action="" class="form-inline">
        <div class="form-group">
           <label for="nombre" class="control-label col-sm-3">Nombre</label>
              <div class="col-sm-9">
                 <input type="text" id="nombre" class="form-control">
              </div>
        </div>
    </form>