Formulario de login con Bootstrap 4

Formulario responsivo para login con Bootstrap

En esta ocasión vengo a compartir un simple diseño de un formulario de inicio de sesión o login hecho con Bootstrap 4.

Generalmente un formulario de login solo lleva dos campos: el del correo y la contraseña.

Gracias a los estilos de Bootstrap podemos diseñar un formulario responsivo, elegante y simple con pocas líneas de código.

Diseño de formulario de login con Bootstrap 4

Nuestro formulario debe ser responsivo, así que en dispositivos como computadoras o iPads (de manera horizontal) debería ocupar un espacio pequeño en el centro; y en dispositivos de pantallas pequeñas debería abarcar todo el ancho.

Para lograr esto utilizamos las clases de offset y las clases de columnas, que básicamente empujan el formulario 4 columnas a la derecha en pantallas anchas; el formulario ocupa 4 y sobran 4 (ya que son 12 columnas en total); dándole un centrado.

En las versiones de pantallas pequeñas especificamos un col-12 para que ocupe todo el ancho.

<!doctype html>
<html lang="es">
    <!--
Ejemplo de formulario de login con Bootstrap

Basado en:

  Plantilla inicial de Bootstrap 4
  @author parzibyte
  Visita: parzibyte.me/blog


-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no">
        <meta name="description" content="Formulario de login con Bootstrap">
        <meta name="author" content="Parzibyte">
        <title>Formulario de login con Bootstrap</title>
        <!-- Cargar el CSS de Boostrap-->
        <link href="./css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <main role="main" class="container my-auto">
            <div class="row">
                <div id="login" class="col-lg-4 offset-lg-4 col-md-6 offset-md-3
                    col-12">
                    <h2 class="text-center">Bienvenido de nuevo</h2>
                    <img class="img-fluid mx-auto d-block rounded"
                        src="https://picsum.photos/id/870/300/200" />

                    <form>
                        <div class="form-group">
                            <label for="correo">Correo</label>
                            <input id="correo" name="correo"
                                class="form-control" type="email"
                                placeholder="Correo electrónico">
                        </div>
                        <div class="form-group">
                            <label for="palabraSecreta">Contraseña</label>
                            <input id="palabraSecreta" name="palabraSecreta"
                                class="form-control" type="password"
                                placeholder="Contraseña">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">
                            Entrar
                        </button>
                        <br>
                        <a href="#">Contraseña olvidada</a>
                    </form>
                </div>
            </div>
        </main>
    </body>

</html>

Para definir cada input agregamos un div con la clase form-group, y cada input debe tener la clase form-control.

El botón es un simple botón con la variante de primary. También he colocado una imagen centrada y con los bordes redondados para adornar el login, la cual es totalmente opcional.

El procesamiento del login puede hacerse con cualquier lenguaje o framework, ya sea del lado del cliente o del lado del servidor. Hace algún tiempo hice un ejemplo con PHP, y uno con PHP y MySQL.

Al final el login queda como se ve a continuación:

Formulario responsivo para login con Bootstrap

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/