0

Estoy diseñando un formulario usando bootstrap. No es el primero pero me trae de cabeza la separación vertical entre campos. En la siguiente imágen se puede ver como en la web de bootstrap aparecen los campos con una separación vertical introducir la descripción de la imagen aquí

copio el código de ejemplo y lo pego en mi proyecto y se ve así introducir la descripción de la imagen aquí como podéis observar, el label de Address está muy pegado al campo de Email y así con todos. He comprobado en navegadores chrome, mozilla y edge y mismo problema. el código es el mismo copiado y pegado que el del ejemplo de la web de bootstrap.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Además los campos type file me los muestra así: introducir la descripción de la imagen aquí

Cuando debería mostrarse así: introducir la descripción de la imagen aquí

¿Alguna sugerencia de qué es lo que me falta o me está pasando? Gracias de antemano a todos

3
  • Respecto al espaciado entre campos, puedes añadir la clase mt (margin-top) a los labels. El mínimo es 1 (mt-1) y el máximo es 5 (mt-5), ya tu decides cuánto espacio le quieres asignar Commented el 13 oct. 2021 a las 18:56
  • Y respecto al campo type file, el diseño que deseas sólo está disponible para la versión 5.1 de Bootstrap, es probable que estés haciendo referencia a una versión anterior Commented el 13 oct. 2021 a las 19:01
  • Como te indican en la respuesta, fíjate que estés utilizando la versión 5 de Bootstrap en tu <header>. Commented el 14 oct. 2021 a las 0:38

2 respuestas 2

1

El error esta en tu css, si observas

<select id="inputState" class="form-select">
  <option selected>Choose...</option>
  <option>...</option>
</select>

En la etiqueta "select" se hace referencia a la clase "form-select" pero esta no esta en el documento css proporcionado por Bootstrap; en la versión 4 se usa "form-control"; la clase "form-select" se usa en la versión 5.

0
0

Gracias a todos por la ayuda. Gracias a vuestros comentarios vi que tenía enlazada la versión 4 de bootstrap y usaba clases de la versión 5. Al cambiar el cdn a la versión 5 y después de algunos ajustes... todo funciona correctamente. Gracias de nuevo a todos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.