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!
    – user101604
    Commented el 21 jul. 2021 a las 19:33

Tu Respuesta

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