Otra variante de formulario que nos permite Bootstrap son los formularios horizontales. En este estilo de formularios se dispone la descripción del dato a ingresar en el lado izquierdo y el control del formulario a derecha.
Problema
Construir un formulario de login que muestre a la izquierda "Nombre de usuario:" y a la derecha el control donde se ingresa el nombre. Hacer lo mismo para el campo de ingreso de la clave, mostrar "Ingrese clave" y del lado de la derecha el control HTML password. Mostrar finalmente un botón a la altura de los controles de entrada de datos. La interfaz debe ser similar a esta:
El código de la página para implementar el formulario es:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="usuario" class="col-sm-3 control-label">Nombre de usuario:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="usuario">
</div>
</div>
<div class="form-group">
<label for="clave" class="col-sm-3 control-label">Ingrese clave:</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="clave">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Entrar</button>
</div>
</div>
</form>
</div>
</body>
</html>
Lo primero que debemos especificar en la marca form es la clase "form-horizontal":
<form class="form-horizontal" role="form">
Pero ahora debemos indicar cuanto espacio asignar a la columna de descripción y cuanto al control HTML propiamente dicho:
<div class="form-group">
<label for="usuario" class="col-sm-3 control-label">Nombre de usuario:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="usuario">
</div>
</div>
Como podemos ver en la etiqueta label inicializamos con la clase col-sm-3 indicando que tres columnas le corresponden al mensaje "Nombre de usuario:" y luego al control input lo encerramos en un div con la asignación de la clase col-sm-9 completando las doce columnas.
Para el botón lo encerramos con las clases col-sm-9 y además con col-sm-offset-3 para que deje vacía las tres primeras columnas:
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Entrar</button>
</div>