"Simple login form - Bootsnipp style colorgraph"
Bootstrap 3.3.0 Snippet by nasri

<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="wrapper"> <form action="" method="post" name="Login_Form" class="form-signin"> <h3 class="form-signin-heading">Connexion</h3> <hr class="colorgraph"><br> <input type="text" class="form-control" name="Login" placeholder="Login" required="" autofocus="" /> <input style="margin-bottom:5px" type="password" class="form-control" name="Mot de passe" placeholder="Mot de passe" required=""/> <a href="#">Mot de passe oublié ?</a> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Active Directory ? </label> </div> <button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit">se connecter</button> </form> </div> </div>
.wrapper { margin-top: 80px; margin-bottom: 20px; } .form-signin { max-width: 420px; padding: 30px 38px 66px; margin: 0 auto; background-color: #eee; border: 3px dotted rgba(0,0,0,0.1); } .form-signin-heading { text-align:center; margin-bottom: 30px; } .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; } input[type="text"] { margin-bottom: 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } input[type="password"] { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; } .colorgraph { height: 7px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #669ae1 75%, #669ae1 87.5%); }

Related: See More


Questions / Comments: