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

2 minuto(s)

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.

Formulario creado con Bootstrap 5 — Bootstrap es un genial framework CSS que permite crear formularios rápidamente

Tenemos el siguiente formulario HTML creado con Bootstrap 5:


<form>
  <div class="mb-3">
    <label for="nya" class="form-label">Nombres y Apellidos</label>
    <input type="text" class="form-control" id="nya" required>
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" placeholder="email@email.com" required>
  </div>
  <div class="mb-3">
    <label for="mensaje" class="form-label">Mensaje</label>
    <textarea class="form-control" id="mensaje" rows="3" required></textarea>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="recordar" required>
    <label class="form-check-label" for="recordar">Recordar</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<form>

<label for="nya" class="form-label">Nombres y Apellidos</label>

</div>

<label for="email" class="form-label">Email</label>

</div>

<label for="mensaje" class="form-label">Mensaje</label>

</div>

<label class="form-check-label" for="recordar">Recordar</label>

</div>

<button type="submit" class="btn btn-primary">Enviar</button>

</form>

El formulario se ve así en el navegador:

Bootstrap 5 tenía una clase nativa para poner los campos de un formulario en línea, pero fue eliminada por problemas de rendimiento.

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:


<form>
  <!-- Campos en línea -->
  <div class="row row-cols-sm-auto align-items-center">
    <div class="col-md-6">
      <label for="nya" class="form-label fw-bold">Nombres y Apellidos</label>
      <input type="text" class="form-control" id="nya" required>
    </div>
    <div class="col-md-6">
      <label for="email" class="form-label fw-bold">Email</label>
      <input type="email" class="form-control" id="email" placeholder="email@email.com" required>
    </div>
  </div>
  <!-- Fin Campos en línea -->
  <div class="mb-3">
    <label for="mensaje" class="form-label fw-bold">Mensaje</label>
    <textarea class="form-control" id="mensaje" rows="3" required></textarea>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="recordar" required>
    <label class="form-check-label" for="recordar">Recordar</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>