Ver índice de contenidos del libro

5.3. Formularios horizontales

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:

Formulario horizontal en Bootstrap 3

Figura 5.3 Formulario horizontal en Bootstrap 3