<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid min-vh-100"> <div class="row min-vh-100"> <div class="col-md-4 bg-dark d-flex justify-content-center justify-content-md-end align-items-center text-white"> <div class="text-center text-md-right m-3"> <h1 class="h2">Login <span class="font-weight-light">now</span></h1> <p>Login or register from here to access.</p> </div> </div> <div class="col-md-8 bg-light d-flex justify-content-start align-items-center"> <div class="login-form my-5 my-md-2"> <form> <div class="form-group"> <label>User Name</label> <input type="text" class="form-control" placeholder="User Name"> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" placeholder="Password"> </div> <button type="button" class="btn btn-dark">Login</button> <button type="button" class="btn btn-outline-secondary">Register</button> <p class="small mt-3">by <a href="https://totoprayogo.com" target="_top">totoprayogo.com</a></p> </form> </div> </div> </div> </div>

.min-vh-100 { min-height: 100vh; } .login-form { width: 100%; } @media (min-width: 768px) { .login-form { max-width: 300px; } }