0

No logro centrar el header de este form, estoy trabajando con Bootstrap por primera vez, quisiera que quede todo centrado como en el prototipo (imagen #2)

Así está

Debería quedar así

Este es todo el CSS:

.login-header {
  background: radial-gradient(
    95.14% 7284.37% at 2.57% 20%,
    #ffc24b 0%,
    #ffa13a 100%
  );

  width: 350px;
  height: 40px;
}
.login-header,
.login p {
  font-family: Ubuntu;
  text-align: center;
  line-height: 40px;
  color: #444444;
  font-style: normal;
  font-weight: normal;
  font-size: 13.0408px;
}

#regForm {
  height: 500px;
  width: 350px;
  border-radius: 5px;
  left: 100px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

Este es el código HTML del form:

<div class="container" id="regForm">
  <h2 class="login-header rounded-top ">
    ¡Registrese y obtenga los libros que más quiera!
  </h2>
  <form class="box pt-4 text-lg-start">
    <input class="rounded" type="text" placeholder="Nombre de usuario" />
    <input type="email" placeholder="Correo electrónico" />
    <input
      type="password"
      placeholder="Contraseña"
      id="password"
      required
    />
    <input
      type="password"
      placeholder="Confirmar contraseña"
      id="confirm_password"
      required
    />
    <button type="submit" class="btn btn-warning shadow p-2 rounded" id="submit">
      Registrarse
    </button>
    <button type="submit" class="btn btn-warning" id="submit">
      Google button
    </button>
  </form>
</div>

Muchas gracias y felices fiestas.

0

1 respuesta 1

1

Te recomiendo usar la clase card de Bootstrap ya que esta dispone de algunas de las propiedades css que utilizaste en #regForm. Son muchas las razones por las que no obtienes el resultado que buscas, por ejemplo no usaste ni row ni col que son dos clases útiles al posicionamiento de los elementos.

Te adjunto un código de ejemplo que hace lo que buscas:

.login-header {
    width: 350px;
    height: 40px;
}
.button {
    width: 200px;
}
.login-header, .registro {
    background: radial-gradient(95.14% 7284.37% at 2.57% 20%, #ffc24b 0%, #ffa13a 100%);
}
.button, #regForm {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}
.login-header,
.login p {
    font-family: Ubuntu;
    text-align: center;
    line-height: 40px;
    color: #444444;
    font-style: normal;
    font-weight: normal;
    font-size: 13.0408px;
}
#regForm {
    height: 500px;
    width: 350px;
    border: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="container mt-5">

    <div class="card mx-auto" id="regForm">
        <h2 class="login-header rounded-top">¡Registrese y obtenga los libros que más quiera!</h2>
        <div class="card-body">
            <form action="">
                <div class="form-group col-12 p-0 mb-4">
                    <input class="form-control" type="text" placeholder="Nombre de usuario" />
                </div><!--//form-group-->
                <div class="form-group col-12 p-0 mb-4">
                    <input class="form-control" type="email" placeholder="Correo electrónico" />
                </div><!--//form-group-->
                <div class="form-group col-12 p-0 mb-4">
                    <input class="form-control" type="password" placeholder="Contraseña" id="password" required />
                </div><!--//form-group-->
                <div class="form-group col-12 p-0 mb-4">
                    <input class="form-control" type="password" placeholder="Confirmar contraseña" id="confirm_password" required />
                </div><!--//form-group-->
                <div class="form-group col-12 text-center mb-3">
                    <button type="submit" class="btn button registro" id="submit">
                        Registrarse
                    </button>
                </div><!--//form-group-->
                <div class="form-group col-12 text-center">
                    <button type="submit" class="btn button bg-white" id="submit">
                        Google button
                    </button>
                </div><!--//form-group-->
            </form>
        </div><!--//card-body-->
    </div><!--//card-->

</div><!--//container-->

1
  • Muchisimas gracias, Ariel, me es muy util tu respuesta, héroe sin capa
    – Vie
    Commented el 26 dic. 2020 a las 2:51

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.