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-group
para cada campo con su label