1

Estoy intentando centrar un login y no logro hacerlo. La sección de login tiene que estar dividida en dos y centrada, pero tiene que tener un full height y no sé porque no me queda.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>

<div class="d-flex d-flex align-self-center">
<div class="row h-100">

<div class="bg-dark text-white col-md-6">
<div class="">
<h1>Texto izquierda</h1>
</div>
</div>

<div class="bg-light col-md-6">
<div class="">
<form action="" method="post">
<div class="mb-3">
<input type="email" class="form-control" name="email" required autocomplete="off" placeholder="Email">
</div>
<div class="mb-3">
<input type="password" class="form-control" name="pass" required placeholder="Password">
</div>
<button type="submit" name="signin" class="btn btn-primary">Sign In</button>
</form>
</div>
</div>
</div>
</div>

</body>
</html>

1 respuesta 1

3

el tema es que estas usando clases de mas como .row, ya que se estas usando flexbox y no necesitas ese contenedor y también que estas usando una altura del 100% en realidad tiene que ser de 100vh en bootstrap lo encontras como vh-100.

Te dejo mi solución, y también le agregue algunos valores de flexbox a los contenedores md-6 ya que con eso se van a centrar, si gustas se lo podes sacar solo le di algo estético.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>


  <div class="d-flex d-flex justify-content-center vh-100">
 
  
      <div class="bg-dark text-white col-md-6 d-flex d-flex justify-content-center align-items-center">
          <div class="">
            <h1>Texto izquierda</h1>
          </div>
      </div>
  
      <div class="bg-light col-md-6 d-flex d-flex justify-content-center align-items-center">
        <div class="">
        <form action="" method="post">
        <div class="mb-3">
        <input type="email" class="form-control" name="email" required autocomplete="off" placeholder="Email">
        </div>
        <div class="mb-3">
        <input type="password" class="form-control" name="pass" required placeholder="Password">
        </div>
        <button type="submit" name="signin" class="btn btn-primary">Sign In</button>
        </form>
        </div>
      </div>
  
  </div>


</body>
</html>

Espero ayudarte con esto, cualquier cosa me comentas, Suerte!

1
  • Gracias Daniel!
    – Sebastian
    el 21 jul. 2021 a las 19:33

Tu Respuesta

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

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