2.1.7. Formularios Bootstrap

Un formulario HTML es fundamental em las páginas y aplicaciones web, diseñar los controles de formulario manualmente uno por uno con CSS es a menudo aburrido y tedioso. Bootstrap simplifica enormemente el proceso de diseño y la alineación de los controles de formulario como etiquetas, campos de entrada, cajas de selección, áreas de texto, botones, etc a través de un conjunto predefinido de clases

Bootstrap proporciona tres diferentes tipos de diseños para formularios:

Con las siguientes reglas de diseño

Vertical Form

See the Pen wMPqRE by JOSE (@albatros) on CodePen.

Formularios Horizontales

Es necesario aplicar las siguientes reglas:

Tip: Use las clases grid para alinear las etiquetas y los elementos del contenedor de grupo.

See the Pen NxebPE by JOSE (@albatros) on CodePen.

Formularios de línea


Un formulario ocupa el menor espacio posible, si se añade la clase .form-inline para que las etiquetas se muestren a la izquierda de cada campo del formulario

Nota: Use este tipo de formularios en pantallas con menos de 768px de ancho

Para diseñar un formulario en línea siga las siguientes reglas


See the Pen obJBXM by JOSE (@albatros) on CodePen.


La clase sr-only es importante y no debe removerse