"Login Page with Bootstrap 4"
Bootstrap 4.1.1 Snippet by realjblaq

<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 login__container my-5"> <div class="row login__row"> <div class="col-md-6 d-flex"> <img class="login__imagek align-self-center" src="https://www.freevector.com/uploads/vector/preview/28488/Businessman_Happy_Accepting_News.jpg" width="100%" alt="" /> </div> <div class="col-md-5 d-flex"> <div class="align-self-center card login__card shadow-sm w-100"> <div class="card-body"> <form action=""> <h2 class="text-muted text-center">Login Page - Bootstrap 4</h2> <div class="my-5"> <h5 class="text-center"> Login </h5> </div> <div class=""> <div class="form-group"> <label for="">Username</label> <input type="text" class="form-control form-control-lg" /> </div> <div class="form-group"> <label for="">Password</label> <input type="password" class="form-control form-control-lg" /> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input custom-control" id="customCheckDisabled1" /> <label class="custom-control-label" for="customCheckDisabled1">Remember me</label> </div> <div class="form-group"> <a href="#" class="btn btn-primary btn-lg btn-block my-3"> Login </a> <div class="d-flex justify-content-between"> <a href="#!">Password forgotten?</a> <span> <a href="#">Create account</a></span> </div> <div class="dropdown-divider my-4"></div> <div class="text-center w-100"> <small>Built by <a href="https://www.instagram.com/realjblaq/">@realjblaq</a> </small> </dvi> </div> </div> </form> </div> </div> </div> </div> </div>
html, body { max-width: 100%; overflow-x: hidden; } .login__body { min-height: 100vh; } .login__image { -o-object-fit: contain; object-fit: contain; } .login__container, .login__row { min-height: 100vh; } .login__card { background-color: #f6f6f6; } /*# sourceMappingURL=main.css.map */

Related: See More


Questions / Comments: