Formulario de login con Bootstrap 4

Publicado por parzibyte en

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.

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

Puedes probar el formulario en vivo aquí, el cual está basado en una plantilla de Bootstrap 4.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: