<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"> <h4>Login to Web App</h4> <hr> <form class="login-inner"> <input type="email" class="form-control email" id="email-input" placeholder="Enter email"> <input type="password" class="form-control password" id="password-input" placeholder="Password"> <label class="checkbox-inline"> <input type="checkbox" id="remember" value="Remember me"> Remember me </label> <input class="btn btn-block btn-lg btn-success submit" type="submit" value="Login"> </form> <a href="#" class="btn btn-sm btn-primary register">Register</a> <a href="#" class="btn btn-sm btn-default forgot">Forgot your password?</a> </div> </div>

body { background-color: #ddd; } .login { margin-top: 25px !important; padding: 5px; width: auto; min-width: 320px; max-width: 400px; height: 400px; background-color: #f3f3f3; margin:0 auto; border-radius: 10px; border: 1px solid ##c5c5c5; text-align: center; } .login-inner { margin:0 auto; max-width: 380px; width: auto; } .login>h4 { font-size: 20px; margin-left: 5px; font-weight: 600; } .email { margin-bottom: 5px; } .password { margin-bottom: 5px; } .submit { margin-top: 5px; } .forgot { min-width:50px; width: 49%; float: right; margin-top: 20px; } .register { width: 50%; float: left; margin-top: 20px; } @media (max-width: 320px) { .forgot { font-size: 9px; font-weight: 700; padding: 8px; } }