<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"> <div class="row"> <div class="col-6 mx-auto p-4 m-5 border-light shadow-sm"> <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-3 text-center"> Get Members Benefit. <a href="#">Sign Up</a> </div> </div> </div> </div> </div> <div class="container text-center small text-muted mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">bootstraplily.com</a> </div>

.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; }