Otra variante de formulario que nos permite Bootstrap 5 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.
Para resolver este tipo de problemas debemos utilizar el sistema de grillas de Bootstrap.
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:
<!doctype html> <html> <head> <title>Prueba de Bootstrap 5</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> </head> <body> <div class="container"> <form> <div class="mb-3 row"> <label for="usuario" class="col-sm-3 col-form-label">Nombre de usuario:</label> <div class="col-sm-9"> <input type="text" class="form-control" id="usuario"> </div> </div> <div class="mb-3 row"> <label for="clave" class="col-sm-3 col-form-label">Ingrese clave:</label> <div class="col-sm-9"> <input type="password" class="form-control" id="clave"> </div> </div> <div class="mb-3 row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Confirmar</button> </div> </div> </form> </div> </body> </html>
Definimos una fila "row" para cada label y control input:
<div class="mb-3 row"> <label for="usuario" class="col-sm-3 col-form-label">Nombre de usuario:</label> <div class="col-sm-9"> <input type="text" class="form-control" id="usuario"> </div> </div>
Dendro del div disponemos un "label" y especificamos cuando espacio del sistema de grillas utilizará: "col-sm-3", además de la clase "col-form-label" (Es importante agregar la clase "col-form-label" para el correcto alineamiento vertical de la "label").
Luego en un div disponemos el espacio requerido para el control de formulario propiamente dicho: "col-sm-9".
En forma similar implementamos la fila donde se pide la clave:
<div class="mb-3 row"> <label for="clave" class="col-sm-3 col-form-label">Ingrese clave:</label> <div class="col-sm-9"> <input type="password" class="form-control" id="clave"> </div> </div>
El botón para que aparezca debajo de los controles input efectuamos un offset:
<div class="mb-3 row"> <div class="offset-sm-3 col-sm-9"> <button type="submit" class="btn btn-primary">Confirmar</button> </div> </div>
Nuestro formulario se comporta responsive. Si el tamaño del dispositivo es grande:
Pero si reducimos su ancho podremos ver como sucede en el sistema de grillas de Bootstrap que las columnas de la fila colapsan: