<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-md-3"> </div> <div class="col-md-6 mt-5 mb-3"> <h4 class="website-logo text-center mt-5 mb-4">Website <span class="brand">Brand</span></h4> <div class="shadow-sm p-3 login"> <form class="form-group"> <div class="userlogin"> <input type="text" name="userlogin" value="" placeholder="Username or Email" class="form-control mt-5"> <input type="password" name="userpassword" value="" placeholder="Password" class="form-control mt-2 mb-2"> <input type="checkbox" name="checkbox" value="Yes"> <label for="checkbox" class="loginremember">Remember my details</label> </div> <div class="userloginsubmit"> <div class="row"> <div class="col-6"> <button type="submit" name="submit" class="btn btn-primary mt-3">Login</button> </div> <div class="col-6"> <p class="fp mt-3 mr-2 text-right"><a href="#">Forgot Password?</a></p> </div> </div> </div> <p class="register text-center mt-3">New? Register <a href="#">Here</a></p> </form> </div> </div> <div class="col-md-3"> </div> </div> </div>

body { background-color: #fdfcfd; } .brand { color: #6c757d; } .login { width: 90%; background-color: #fff; margin: auto; } .form-control { border: 2px solid #fdfcfd; } .btn-primary { color: #6c757d; background-color: #fdfcfd; border-color: #fdfcfd; border-radius: 0px; padding: 5px 40px; } .loginremember { color: #6c757d; font-size: 12px; } .fp { font-size: 12px; } .fp a { color: #000; } .register { font-size: 15px; } .register a { color: #000; font-weight: 500; }