<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 ----------> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-4 shadow-none mx-auto pt-2 rounded"> <div class="card shadow"> <div class="card-body text-center"> <i class="fa fa-user-circle-o" style="font-size: 6rem;" aria-hidden="true"></i> <div class="signin-label mb-4"> Sign In </div> <form> <div class="input-label font-weight-bold text-left"> Username </div> <div class="input-group input-group-sm mb-3"> <!-- <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm"><i class="fa fa-user" aria-hidden="true"></i></span> </div> --> <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"> </div> <div class="input-label font-weight-bold text-left"> Password </div> <div class="input-group input-group-sm mb-3"> <!-- <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm"><i class="fa fa-key" aria-hidden="true"></i></span> </div> --> <input type="text" class="form-control" aria-label="" aria-describedby="inputGroup-sizing-sm"> </div> <div class="form-check text-left"> <input class="form-check-input float-left" type="checkbox" value="" id="rememberMe"> <label class="remember-me-label" for="rememberMe"> Remember Me </label> <span class="forgot-password float-right"> <a href="#">Forgot Password?</a> </span> </div> <button type="button" class="btn btn-md btn-success mt-3"> Login </button> </form> <p class="remember-me-label mt-3"> Don't have an account yet? <span class="sign-up-label"> <a href="#">Sign Up</a> </span> </p> <div class="remember-me-label mt-3"> Sign in using </div> <ul class="list-inline mt-2"> <li class="list-inline-item"> <i class="fa fa-google fa-2" aria-hidden="true"></i> </li> <li class="list-inline-item"> <i class="fa fa-facebook-official fa-2" aria-hidden="true"></i> </li> <li class="list-inline-item"> <i class="fa fa-windows fa-2" aria-hidden="true"></i> </li> <li class="list-inline-item"> <i class="fa fa-github fa-2" aria-hidden="true"></i> </li> <li class="list-inline-item"> <i class="fa fa-twitter fa-2" aria-hidden="true"></i> </li> </ul> </div> </div> </div> </div> </div>

.signin-label{ font-size: 1.2rem; color: #656262; } .remember-me-label{ font-size: 0.8rem; vertical-align: middle; color: #656262; } .forgot-password{ font-size: 0.8rem; color: #00b7c2; } .sign-up-label{ font-size: 0.8rem; color: #0f4c75; } .input-label{ font-size: 14px; color: #656262; } .fa-2{ font-size: 1.4em; }