<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="login col-md-3 col-xs-11"> <div class="row"> <div class="login-title col-xs-12"> <h3>Member Login</h3> </div> <div class="login-content col-xs-12"> <form class="" action="" method=""> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div> <input type="text" class="form-control" id="username" placeholder="Username"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div> <input type="password" class="form-control" id="password" placeholder="Password"> </div> </div> <div class="form-group text-center"> <button class="btn btn-primary btn-block" type="button" name="button">Sing In</button> </div> </form> </div> <div class="login-footer col-xs-12"> <a href="#" class="text-muted pull-left">Forgot Password?</a> <a href="#" class="text-muted pull-right">Create an Account</a> </div> </div> </div> </div>

body{ background-color: #ECEFF1; color: #fff; } .input-group-addon{ background-color: #ECEFF1; border: 2px solid #fff; color: #263238; } .form-control{ background-color: #ECEFF1; border: 2px solid #fff; color: #263238; } .btn-primary{ background-color: #2196F3; border-color: #2196F3; } .login{ margin: auto; position: absolute; top: 5%; right: 0; left: 0; transform: translateY(50%); background-color: #ffffff; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); } .login-title{ background-color: #263238; text-align: center; text-transform: uppercase; font-weight: bold; padding: 13px 0; } .login-content{ padding-top: 20px; padding-bottom: 25px; } .login-footer{ padding-bottom: 25px; }