<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row m-5 no-gutters shadow-lg"> <div class="col-md-6 d-none d-md-block"> <img src="https://images.unsplash.com/photo-1566888596782-c7f41cc184c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80" class="img-fluid" style="min-height:100%;" /> </div> <div class="col-md-6 bg-white p-5"> <h3 class="pb-3">Login Form</h3> <div class="form-style"> <form> <div class="form-group pb-3"> <input type="email" placeholder="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> <div class="form-group pb-3"> <input type="password" placeholder="Password" class="form-control" id="exampleInputPassword1"> </div> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center"><input name="" type="checkbox" value="" /> <span class="pl-2 font-weight-bold">Remember Me</span></div> <div><a href="#">Forget Password?</a></div> </div> <div class="pb-2"> <button type="submit" class="btn btn-dark w-100 font-weight-bold mt-2">Submit</button> </div> </form> <div class="sideline">OR</div> <div> <button type="submit" class="btn btn-primary w-100 font-weight-bold mt-2"><i class="fa fa-facebook" aria-hidden="true"></i> Login With Facebook</button> </div> <div class="pt-4 text-center"> Get Members Benefit. <a href="#">Sign Up</a> </div> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">bootstraplily.com</a> </div>

body{ background: #c9ccd1; /* Old browsers */ } .form-style input{ border:0; height:50px; border-radius:0; border-bottom:1px solid #ebebeb; } .form-style input:focus{ border-bottom:1px solid #007bff; box-shadow:none; outline:0; background-color:#ebebeb; } .sideline { display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; color:#ccc; } button{ height:50px; } .sideline:before, .sideline:after { content: ''; border-top: 1px solid #ebebeb; margin: 0 20px 0 0; flex: 1 0 20px; } .sideline:after { margin: 0 0 0 20px; }