Layout Vertical para Formularios
Primero, vamos a crear un formulario básico con un layout vertical.
Paso 1: Crear el Contenedor
Vamos a crear un div con la clase container y un formulario dentro de él.
<div class="container">
<form>
<!-- Contenido del formulario -->
</form>
</div>Paso 2: Añadir una Fila y Columnas para los Inputs
Añadimos una fila (row) y dos columnas (col) dentro del formulario. Cada columna contendrá un input con su label.
<form class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="emailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="emailInput" placeholder="Escribe tu email">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="passwordInput" class="form-label">Contraseña</label>
<input type="password" class="form-control" id="passwordInput" placeholder="Escribe tu contraseña">
</div>
</div>
</form>Paso 3: Añadir Más Filas y Columnas
Vamos a añadir más filas y columnas para otros campos como dirección, ciudad, código postal y país.
<div class="row">
<div class="col-12 mb-3">
<label for="addressInput" class="form-label">Dirección</label>
<input type="text" class="form-control" id="addressInput" placeholder="Dirección">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cityInput" class="form-label">Ciudad</label>
<input type="text" class="form-control" id="cityInput" placeholder="Ciudad">
</div>
<div class="col-md-3 mb-3">
<label for="postalCodeInput" class="form-label">Código Postal</label>
<input type="text" class="form-control" id="postalCodeInput" placeholder="Código Postal">
</div>
<div class="col-md-3 mb-3">
<label for="countryInput" class="form-label">País</label>
<input type="text" class="form-control" id="countryInput" placeholder="País">
</div>
</div>Paso 4: Añadir un Check Box y un Botón
Por último, vamos a añadir un check box para los términos y condiciones, y un botón de envío.
<div class="row">
<div class="col-12 mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="termsCheck">
<label class="form-check-label" for="termsCheck">
Acepto los términos y condiciones
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<button type="submit" class="btn btn-primary">Regístrate</button>
</div>
</div>Layout Horizontal para Formularios
Ahora vamos a crear un formulario con un layout horizontal, utilizando varias filas (row).
Paso 1: Crear el Contenedor y el Formulario
<div class="container">
<form>
<!-- Contenido del formulario -->
</form>
</div>Paso 2: Añadir una Fila y Columnas para los Inputs
Vamos a crear filas con dos columnas: una para el label y otra para el input.
<form>
<div class="row mb-3">
<label for="emailInput" class="col-md-2 col-form-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="emailInput" placeholder="Escribe tu email">
</div>
</div>
<div class="row mb-3">
<label for="passwordInput" class="col-md-2 col-form-label">Contraseña</label>
<div class="col-md-10">
<input type="password" class="form-control" id="passwordInput" placeholder="Escribe tu contraseña">
</div>
</div>
</form>Paso 3: Añadir un Check Box y un Botón
Igual que antes, añadimos un check box y un botón al final del formulario.
<div class="row mb-3">
<div class="col-md-2"> </div>
<div class="col-md-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="termsCheck">
<label class="form-check-label" for="termsCheck">
Acepto los términos y condiciones
</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-2"> </div>
<div class="col-md-10">
<button type="submit" class="btn btn-primary">Entrar</button>
</div>
</div>Conclusión
Hemos visto cómo crear formularios con layouts verticales y horizontales usando Bootstrap 5. Estos ejemplos básicos pueden ser adaptados y extendidos según las necesidades de tu proyecto.
