Center X and Y a login screen with bootstrap 4

Question

I started to use bootstrap 4

my css

html{
    height:100%;
    background-color:#fff;
    font-size:12px;
}
body.login-body{
    height:100%;
    background-color:#fff;
    padding-top:20px;
}

In my login html i created this code

<body class="login-body">
   <div class="container h100">
      <div class="row align-items-center h-100">
         <div class="col-d-4 my-auto mx-auto">
            <div class="text-center">
               <img src="/img/perma-xsm.png" alt="">
            </div>
            <div class="login-box">
               <div class="login-title">LCM</div>
               <form class="form-signin" id="loginForm" action="/login" method="post">
                  <input type="text" name="username" id="username" class="form-control" placeholder="Email" required="" autofocus="">
                  <input type="password" name="password" id="password" class="form-control" placeholder="Password" required="">
                  <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
               </form>
            </div>
         </div>
      </div>
   </div>
</body>

I tried to align verticaly and horizontaly without success my login

so my try was to use align-items-center on flexbox parent

Change the `h100` typo on `container` to h-100` – Carol Skelly Mar 22 '18 at 06:37 — Carol Skelly, Mar 22 '18 at 06:37

score 0 · Answer 1 · answered Mar 22 '18 at 06:06

I hope this will help you.making container height:100% will work.

.login-body > .container{
height:100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<style>
html{
    height:100%;
    background-color:#fff;
    font-size:12px;
}
body.login-body{
    height:100%;
    background-color:#fff;
    padding-top:20px;
}
</style>
<body class="login-body">
   <div class="container h100">
      <div class="row align-items-center h-100">
         <div class="col-d-4 my-auto mx-auto">
            <div class="text-center">
               <img src="/img/perma-xsm.png" alt="">
            </div>
            <div class="login-box">
               <div class="login-title">LCM</div>
               <form class="form-signin" id="loginForm" action="/login" method="post">
                  <input type="text" name="username" id="username" class="form-control" placeholder="Email" required="" autofocus="">
                  <input type="password" name="password" id="password" class="form-control" placeholder="Password" required="">
                  <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
               </form>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

Center X and Y a login screen with bootstrap 4

1 Answers1