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.

1 comentario en “Formulario de login con Bootstrap 4”

Dejar un comentario Cancelar respuesta

Diseño de formulario de login con Bootstrap 4

Estoy aquí para ayudarte

No te pierdas ninguno de mis posts

Comparte esto:

Me gusta esto:

1 comentario en “Formulario de login con Bootstrap 4”

Dejar un comentario Cancelar respuesta