"Password Strength Meter"
Bootstrap 3.3.0 Snippet by mattishere

<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="row" id="pwd-container"> <div class="col-md-4"></div> <div class="col-md-4"> <section class="login-form"> <form method="post" action="#" role="login"> <img style="height:30px; margin-top:-4px" src="http://i.imgur.com/N9cqLpc.png" /> <input type="email" name="email" placeholder="Email" required class="form-control input-lg" value="joestudent@gmail.com" /> <input type="password" class="form-control input-lg" id="password" placeholder="Password" required="" /> <button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Sign in</button> <div> <a href="#">Create account</a> or <a href="#">reset password</a> </div> </form> <div class="form-links"> <a href="#">www.edgarreader.com</a> </div> </section> </div> <div class="col-md-4"></div> </div> </div> <style> @CHARSET "UTF-8"; /* over-ride "Weak" message, show font in dark grey */ .progress-bar { color: #333; } /* Reference: http://www.bootstrapzen.com/item/135/simple-login-form-logo/ */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; @include box-sizing(border-box); &:focus { z-index: 2; } } .login-form { margin-top: 60px; } form[role=login] { color: #5d5d5d; background: #f2f2f2; padding: 26px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } form[role=login] img { display: block; margin: 0 auto; margin-bottom: 35px; } form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } form[role=login] > div { text-align: center; } .form-links { text-align: center; margin-top: 1em; margin-bottom: 50px; } .form-links a { color: #fff; } </style>

Related: See More


Questions / Comments: