"Fancy Form with font awesome"
Bootstrap 3.3.0 Snippet by doncredas

Post to Facebook Tweet this

<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 ----------> <head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></head> <div class="container"> <div class="row block-center"> <div class="col-sm-4 col-sm-offset-4" id="form-box"> <form action="#" method="#"> <div class="panel panel-success"> <div class="panel-heading" id="panel-heading"> <h2 class="titre">CONNEXION</h2> </div> <div class="panel-body"> <form class="form" method="post"> <div class="form-group has-success"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope fa-fw"></i></span> <label for="email" class="sr-only"></label> <input type="email" class="form-control" id="email" name="email" placeholder="Email address" required/><br/> </div> </div> <div class="form-group"> <div class="input-group has-success"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <label for="password" class="sr-only"></label> <input type="password" class="form-control" id="password" name="password" placeholder="Password" required/><br/> </div> </div> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <span id="clear"></span> <button type="submit" class="btn btn-success btn-lg btn-block" >Sign In</button><br/> <p class="help-block">Forgot your password ? <a href="#">Get it</a></p> </form> </div> <div class="panel-footer"> Copyright © All right reserved. <a href="http://www.mywebsite.com">www.mywebsite.com</a>™ </div> </div> </div> </form> </div> </div>
#form-box{ margin-top: 20px; text-align: center; } #panel-heading{ height: 60px !important; } #panel-heading h2{ margin-top: 5px; } #remember{ float: left; margin-top: 0px; } #clear{ clear: left; }

Related: See More

Paper Kit Pro
Awesome Search Box
My Awesome Login Page
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: