0

Me gustaria que quede centrado pero menos ancho, estoy utilizando Bootstrap 5. Es decir que el formulario se vea estilizado en el centro de la pantalla dentro de una especie de container que no cubra toda la pantalla (ancho) a menos que se abra en pantallas pequeñas

<body>
  <div class="container mt-5">
      <div class="row">
          <div class="col-12">
              <h1 class="display-1 text-center">
                  CRUD Fetch API
              </h1>
          </div>
      </div>
      <div class="row mt-3">
          <div class="col-12">
              <form action="">
                  <div class="mb-3">
                    <label for="inpuserId" class="form-label">User Id</label>
                    <input type="text"
                        class="form-control form-control-sm" name="inpuserId" id="inpuserId" aria-describedby="helpUserId" placeholder="User Id">
                    <small id="helpUserId" class="form-text text-muted"></small>
                  </div>
                  
              </form>
          </div>
      </div>
  </div>

Allí se observa que está bien pero está muy ancho el input

1
  • y los estilos de la pagina ?
    – Excorpion
    Commented el 17 mar. 2022 a las 15:58

1 respuesta 1

1

Realicé dos cambios en los div que contiene el formulario

<div class="row justify-content-center">
          <div class="col-6">
              <form action="">
                  <div class="mb-3">
                    <label for="inpuserId" class="form-label">User Id</label>
                    <input type="text"
                        class="form-control form-control-sm" name="inpuserId" id="inpuserId" aria-describedby="helpUserId" placeholder="User Id">
                    <small id="helpUserId" class="form-text text-muted"></small>
                  </div>
              </form>
          </div>
      </div>

Asumiendo que haces uso del starter template de Bootstrap 5. El justify-content-center para que el navegador pueda definir cómo se distribuye el espacio a lo largo del container y el col-6 para definir un tamaño específico de columnas.

1
  • Gracias por el aporte Commented el 10 feb. 2023 a las 14:34

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.