<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 login"> <div class="form-row"> <div class="col-xs-4 col-sm-3"> <a href="#" class="btn btn-lg btn-block btn-facebook">Facebook</a> </div> <div class="col-xs-4 col-sm-3"> <a href="#" class="btn btn-lg btn-block btn-google">Google</a> </div> </div> <div class="form-row login-or"> <div class="col-xs-12 col-sm-6"> <hr class="hr-or"> <span class="span-or">or</span> </div> </div> <form action="" autocomplete="off" method="POST"> <div class="form-row"> <div class="col-xs-12 col-sm-6" action="" autocomplete="off" method="POST"> <label for="username" class="sr-only">Email</label> <input type="email" class="form-control form-row" name="email" placeholder="email address"> <label for="password" class="sr-only"></label> <input type="password" class="form-control form-row" name="password" placeholder="Password"> </div> </div> <div class="form-row top-margin"> <div class="col-xs-4 col-sm-3"> <label class="checkbox" class="form-control"><input type="checkbox" value="remember-me"/> Remember Me</label> </div> <div class="col-xs-4 col-sm-3"><input type='submit' value='Login' class='btn form-control btn-lg btn-primary float-right'/></div> </div> </form> <div class="form-row top-margin"> <p class="text-center col-xs-12 col-sm-6"><a href="">Forgot password?</a></p> </div> </div>

.login .btn { color: white; } .btn-facebook { background: #3b5998;} .btn-google { background: #c32f10;} .login .login-or { position: relative; font-size: 1.5rem; color: #aaa; margin-top: 1rem; margin-bottom: 1rem; } .login .login-or .hr-or { background-color: #cdcdcd; height: 1px; margin-top: 0px !important; margin-bottom: 0px !important; } .login .login-or .span-or { display: block; position: absolute; left: 50%; top: -1rem; margin-left: -1.5rem; background-color: #fff; /* Set to background color of the container) */ width: 3rem; text-align: center; } .top-margin{ margin-top: 1rem; } .login label+input+label+input{ margin-top: 1rem; }