Bootstrap 3 también permite alinear los elementos <label>
y los campos de formulario mediante las clases CSS utilizadas para definir las rejillas de los layouts. Para ello, añade la clase .form-horizontal
al formulario. Además, como esta clase modifica la clase .form-group
para que se comporte como la fila de una rejilla, no es necesario que añadas en el formulario elementos con la clase .row
.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="ejemplo_email_3" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="ejemplo_email_3"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="ejemplo_password_3" class="col-lg-2 control-label">Contraseña</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="ejemplo_password_3"
placeholder="Contraseña">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> No cerrar sesión
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Entrar</button>
</div>
</div>
</form>
Así se ve este ejemplo en tu navegador:
Y esta es la imagen del aspecto que debería tener este ejemplo: