¿Cómo crear formularios y tablas responsivas con Bootstrap? | Bootstrap y Diseño Responsivo

Bootstrap te permite construir formularios y tablas que se adaptan perfectamente a cualquier pantalla, desde un celular hasta una computadora de escritorio.

¿Sabías que el 78% de los mexicanos navegan internet desde su celular? Si tu formulario de contacto se ve horrible en un iPhone, pierdes clientes al instante.

Cómo piensa Bootstrap los formularios

Bootstrap no es magia. Es un sistema de clases que ya tienen estilos listos. Solo tú decides cuáles usar.

Cada campo de un formulario necesita tres cosas básicas:

Una etiqueta (<label>)
Un campo de entrada (<input>, <select>, <textarea>)
La clase form-control en el campo

Eso es todo lo mínimo para que Bootstrap haga su trabajo.

El caso de Sofía y su tienda en línea

Sofía vende artesanías en Oaxaca. Quiere que sus clientes le escriban directamente desde su sitio. Antes usaba un formulario básico de HTML sin clases. En desktop se veía regular. En celular, era un desastre.

Entonces aprendió a usar form-control y su formulario cambió completamente.

Así quedó su código:

<form>
  <div class="mb-3">
    <label for="nombre" class="form-label">Tu nombre</label>
    <input type="text" class="form-control" id="nombre" placeholder="Ej. Juan Pérez">
  </div>
  <div class="mb-3">
    <label for="correo" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="correo" placeholder="juan@correo.com">
  </div>
  <div class="mb-3">
    <label for="mensaje" class="form-label">Mensaje</label>
    <textarea class="form-control" id="mensaje" rows="4"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Enviar mensaje</button>
</form>

Cada campo vive dentro de un <div class="mb-3">. Eso agrega espacio entre los campos. Sin ese mb-3, todo se apila pegado y se ve feo.

El resultado fue inmediato. Sofía recibió tres pedidos la primera semana desde celular.

Formularios en columnas: cuando necesitas más espacio

A veces un formulario tiene muchos campos. Ponerlos en una sola columna ocupa demasiado espacio vertical.

Bootstrap te permite combinar su sistema de rejilla con los formularios. Así pones dos campos en la misma fila cuando hay suficiente pantalla.

Miguel trabaja en el área de recursos humanos de una empresa en Monterrey. Necesitaba un formulario de registro para nuevos empleados. Nombre, apellido, IMSS, fecha de inicio, puesto y área.

Seis campos en una sola columna se veían interminables. Miguel usó la rejilla:

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="nombre" class="form-label">Nombre</label>
      <input type="text" class="form-control" id="nombre">
    </div>
    <div class="col-md-6">
      <label for="apellido" class="form-label">Apellido</label>
      <input type="text" class="form-control" id="apellido">
    </div>
    <div class="col-md-6">
      <label for="imss" class="form-label">Número IMSS</label>
      <input type="text" class="form-control" id="imss">
    </div>
    <div class="col-md-6">
      <label for="puesto" class="form-label">Puesto</label>
      <input type="text" class="form-control" id="puesto">
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-success">Registrar empleado</button>
    </div>
  </div>
</form>

En celular, cada campo ocupa el 100% del ancho. En tablet o escritorio (md en adelante), los campos se acomodan en dos columnas. El g-3 agrega espacio entre columnas y filas al mismo tiempo.

Miguel redujo el tiempo de captura a la mitad. El formulario era claro y fácil de usar desde cualquier dispositivo.

Validación visual con Bootstrap

Bootstrap también te da clases para mostrar si un campo está bien o mal llenado. Son is-valid e is-invalid.

Por ejemplo, si alguien deja vacío el campo de correo:

<input type="email" class="form-control is-invalid" id="correo">
<div class="invalid-feedback">
  Por favor escribe un correo válido.
</div>

Eso muestra el borde en rojo y el mensaje de error automáticamente. No necesitas CSS extra. Bootstrap ya tiene los estilos.

Tablas responsivas: el problema real

Las tablas son el elemento más difícil de hacer responsivo. Una tabla con siete columnas en celular es imposible de leer.

Bootstrap tiene una solución sencilla: envuelve tu tabla en un <div class="table-responsive">. Eso agrega scroll horizontal solo cuando la tabla es más ancha que la pantalla.

El usuario puede deslizar la tabla sin romper el diseño del resto de la página.

El caso de Fernanda y su reporte de ventas

Fernanda es supervisora en Liverpool, en la Ciudad de México. Cada mes presenta un reporte de ventas por categoría. Antes lo mandaba en Excel. Ahora quiere tenerlo en su sitio interno de la empresa.

El reporte tiene cinco columnas: Categoría, Unidades, Ingreso, Meta mensual y Diferencia.

Así construyó su tabla con Bootstrap:

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>Categoría</th>
        <th>Unidades</th>
        <th>Ingreso</th>
        <th>Meta</th>
        <th>Diferencia</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ropa de dama</td>
        <td>320</td>
        <td>$96,000</td>
        <td>$90,000</td>
        <td class="text-success">+$6,000</td>
      </tr>
      <tr>
        <td>Electrónica</td>
        <td>85</td>
        <td>$127,500</td>
        <td>$150,000</td>
        <td class="text-danger">-$22,500</td>
      </tr>
      <tr>
        <td>Juguetes</td>
        <td>210</td>
        <td>$42,000</td>
        <td>$40,000</td>
        <td class="text-success">+$2,000</td>
      </tr>
    </tbody>
  </table>
</div>

Fíjate en las clases que usó Fernanda:

table: estilos base de Bootstrap
table-striped: filas alternas con color gris claro, más fácil de leer
table-hover: resalta la fila cuando el cursor pasa encima
table-dark en el <thead>: encabezado oscuro que contrasta bien
text-success y text-danger: colores verdes y rojos para los números

En celular, la tabla se puede deslizar horizontalmente. En escritorio, se ve completa y profesional.

Fernanda presentó el reporte en la junta directiva desde su celular. No hubo problemas de visualización.

Errores comunes que debes evitar

Muchos principiantes cometen los mismos errores. Aquí van los más frecuentes para que tú no los repitas.

Olvidar form-control en los campos. Sin esa clase, los inputs se ven con el estilo genérico del navegador. Cada navegador lo muestra diferente. Firefox, Chrome y Safari no se ponen de acuerdo. Con form-control, tú controlas cómo se ve.

No envolver la tabla en table-responsive. Si la tabla tiene muchas columnas y no la envuelves, se sale del contenedor en celular. Rompe el diseño completo de la página. Siempre, siempre usa ese div.

Usar <table> para el diseño del formulario. Hay desarrolladores que aún usan tablas HTML para alinear etiquetas e inputs. Eso es una práctica antigua y no es responsiva. Bootstrap tiene la rejilla para eso.

No probar en celular. Puedes usar las DevTools de Chrome. Presiona F12, luego el ícono de celular. Simula distintas pantallas antes de publicar.

Mezclar clases de Bootstrap con CSS manual sin orden. Si escribes style="width: 400px" en un input, rompes la responsividad. Deja que Bootstrap maneje los anchos.

Selectores y checkboxes también son responsivos

No todo formulario tiene solo inputs de texto. También puedes tener listas desplegables, casillas de verificación y botones de opción.

Bootstrap tiene clases para todos ellos:

<div class="mb-3">
  <label for="estado" class="form-label">Estado</label>
  <select class="form-select" id="estado">
    <option>Jalisco</option>
    <option>Nuevo León</option>
    <option>CDMX</option>
    <option>Oaxaca</option>
  </select>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="terminos">
  <label class="form-check-label" for="terminos">
    Acepto los términos y condiciones
  </label>
</div>

form-select estiliza el <select> igual que un form-control. form-check e form-check-input alinean correctamente los checkboxes con su etiqueta.

Sin estas clases, los checkboxes y selects se ven desalineados en muchos navegadores.

Lo que ya sabes hacer

Llegaste al final de esta lección con herramientas reales. Puedes construir formularios de contacto, registros de empleados y tablas de reportes. Todo con Bootstrap. Todo responsivo.

En la siguiente lección cierras el curso con un proyecto completo. Vas a combinar todo: rejilla, navbar, cards, formularios y tablas en una sola página.