Skip to main content
se añadieron 175 caracteres en el cuerpo
Origen Enlace

Es muy simple, te paso un ejemplo, debes poner cada campo en una columna diferente.

En el ejemplo he puesto un .col-sm-2 para el label, y .col-sm-5 para los campos de formulario; todo dentro de un .form-group

No te olvides de ejecutar y ampliar para ver el ejemplo a pantalla completa. Dime si hay algo que no entiendas.

/* 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>

Además viendo tu codigo:

  • le falta el class="form-control" de bootstrap para cada campo de formulario
  • tienes que usar .form-grouppara cada campo con su label

Es muy simple, te paso un ejemplo, debes poner cada campo en una columna diferente.

En el ejemplo he puesto un .col-sm-2 para el label, y .col-sm-5 para los campos de formulario; todo dentro de un .form-group

No te olvides de ejecutar y ampliar para ver el ejemplo a pantalla completa. Dime si hay algo que no entiendas.

/* 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>

Es muy simple, te paso un ejemplo, debes poner cada campo en una columna diferente.

En el ejemplo he puesto un .col-sm-2 para el label, y .col-sm-5 para los campos de formulario; todo dentro de un .form-group

No te olvides de ejecutar y ampliar para ver el ejemplo a pantalla completa. Dime si hay algo que no entiendas.

/* 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>

Además viendo tu codigo:

  • le falta el class="form-control" de bootstrap para cada campo de formulario
  • tienes que usar .form-grouppara cada campo con su label
Origen Enlace

Es muy simple, te paso un ejemplo, debes poner cada campo en una columna diferente.

En el ejemplo he puesto un .col-sm-2 para el label, y .col-sm-5 para los campos de formulario; todo dentro de un .form-group

No te olvides de ejecutar y ampliar para ver el ejemplo a pantalla completa. Dime si hay algo que no entiendas.

/* 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>