Como Crear Formularios en Línea (Inline) con Bootstrap 4

Bootstrap | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En ocasiones los formularios en línea son necesarios, un ejemplo de este tipo de formularios son los formularios de login o inicio de sesión para los usuarios que visitan una plataforma, hay redes sociales y plataformas conocidas que suelen tener este tipo de interfaces y en este Post te enseñaré como crearlos de manera rápida y sencilla, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”

Spotify SoundCloud Apple Podcasts

Bien ahora continuemos con el Post: Como Crear Formularios en Línea (Inline) con Bootstrap 4. 

Como mencione al inicio, hay plataformas que usan este tipo de formularios, pero eso no quiere decir que siempre los usarán ya que las tendencias en diseño web suelen cambiar constantemente y estas plataformas no se quedan atrás y actualizan la forma de mostrar los formularios.

Los usuarios con experiencia en Bootstrap 4 puede que ya sepan como hacer un formulario en línea (inline), pero  los usuarios nuevos esto es algo novedoso, ya que no saben como hacer este tipo de formularios.

Bootstrap nos facilita la creación de un formulario en línea mediante su clase nativa .form-inline la cual la podemos usar junto con otras clases y elementos de bootstrap que sean necesarios, ademas podemos personalizarlo más, haciendo uso de propiedades puras de CSS.

Para crear el formulario en línea podemos comenzar creando uno con los campos básicos de un formulario de login o inicio de sesión, a este formulario le coloco en el atributo class la clase form-inline de Bootstrap 4.

Si voy al navegador debería de ver el siguiente formulario en línea (inline).

En la imagen anterior puedes ver que mi formulario consta de 2 campos para ingresar el usuario y la contraseña, luego un checkbox con un botón para Aceptar y enviar el formulario.

Hemos creado rápidamente nuestro formulario en línea (inline) con Bootstrap 4, teniendo este formulario listo, podemos agregarle cosas adicionales según lo que necesitemos, por ejemplo podemos colocarle iconos al lado izquierdo de cada campo y esto lo veremos a continuación.

Agregando iconos al formulario en línea (inline)

Bueno ahora que ya tenemos nuestro formulario en línea, podemos agregarle iconos para darle un mejor aspecto, esto es opcional, es decir tu puedes decidir si le pones o no a tu formulario. Usare iconos Font Awesome para este ejemplo.

Lo que haré básicamente es agregar 2 capas o divs con las clases .input-group-prepend e input-group-text y dentro del div que tiene la clase input-group-text colocaré el ícono FontAwesome de usuario <i class=”fas fa-user”></i></div>

Igualmente para el campo de contraseña colocaré un icono Font Awesome, pero ya que este campo es el de contraseña, usaré el icono del candado.

Si vamos al navegador, podemos ver que al lado izquierdo de cada campo del formulario se muestra su icono correspondiente.

Como puedes ver con Bootstrap es fácil crear formulario en línea (inline) rápidamente.

Al inicio de este Post, he colocado una Demo y un enlace al repositorio de proyecto en GitHub.

Conclusión

Hemos aprendido a crear formularios en línea (inline) con el framework Bootstrap 4, la mejor manera de dominar esta herramienta es poniéndola en práctica o usarla en nuestros proyectos.

Nota (s)

  • Las clases de Bootstrap 4 compartidas en este Post pueden cambiar, quedar obsoletas o continuar, esto no depende de mi, si no de las organizaciones o desarrolladores que dan soporte a Bootstrap.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments