Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Crear Formularios en Línea (Inline) con Bootstrap 5

Crear Formularios en Línea (Inline) con Bootstrap 5

Crear Formularios en Línea (Inline) con Bootstrap 5

En esta página:

Github

En ocasiones necesitamos colocar los campos de un formulario en línea o en la misma línea con el framework Bootstrap.

Hacer esto es fácil, solo debes seguir ciertos pasos importantes.

En este tutorial te enseñaré a cómo Crear Formularios en Línea (Inline) con Bootstrap 5, vamos con ello.

Bootstrap es un genial framework CSS que permite crear formularios rápidamente

Tenemos el siguiente formulario HTML creado con Bootstrap 5:


El formulario se ve así en el navegador:

Este formulario consta de 4 campos

Lo que haré es poner el campo Nombres y Apellidos con el campo Email en la misma línea.

Para esto envolvemos esos 2 campos en un div y le agregamos las clases: class=”row row-cols-sm-auto align-items-center”

Y reemplazamos las clases class=”mb-3″ por la clase: class=”col-md-6″, en los 2 divs que envuelven a los campos Nombres y Apellidos y al campo Email:


Si probamos nuestro formulario, podemos ver que los campos se muestran en la misma línea:

Así de fácil puedes crear formularios en línea con Bootstrap 5.

Conclusión

En este tutorial has aprendido a crear formularios en línea (inline) con Bootstrap 5.

Te será de guía para que puedas crear tus propios formularios en línea con el framework Bootstrap.

Para dominar Bootstrap, debes practicar mucho.

Nota(s)

Salir de la versión móvil