"Login Box"
Bootstrap 3.3.0 Snippet by MTaqi

<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"> <div class='col-md-3'></div> <div class="col-md-6"> <div class="login-box well"> <form action=""> <legend>Sign In</legend> <div class="form-group"> <label for="username-email">E-mail or Username</label> <input value='' id="username-email" placeholder="E-mail or Username" type="text" class="form-control" /> </div> <div class="form-group"> <label for="password">Password</label> <input id="password" value='' placeholder="Password" type="text" class="form-control" /> </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me </label> </div> </div> <div class="form-group"> <input type="submit" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" /> </div> <span class='text-center'><a href="/resetting/request" class="text-sm">Forgot Password?</a></span> <div class="form-group"> <p class="text-center m-t-xs text-sm">Do not have an account?</p> <a href="/register/" class="btn btn-default btn-block m-t-md">Create an account</a> </div> </form> </div> </div> <div class='col-md-3'></div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); body { background-color: #f9f9f9 !important; font-family: 'Open Sans', sans-serif!important; font-size:11px; } .well{ background-color:#fff!important; border-radius:0!important; border:black solid 1px; } .well.login-box { /*width:400px; */ border:#d1d1d1 solid 1px; margin:0 auto; margin-top:30px; } .well.login-box legend { font-size:26px; text-align:center; font-weight:300; } .well.login-box label { font-weight:300; font-size:13px; } .well.login-box input[type="text"] { box-shadow:none; border-color:#ddd; border-radius:0; } .well.welcome-text{ font-size:21px; } /* Notifications */ .notification{ position:fixed; top: 20px; right:0; background-color:#FF4136; padding: 20px; color: #fff; font-size:21px; display:none; } .notification-success{ background-color:#3D9970; } .notification-show{ display:block!important; } /*Loged in*/ .btn-default { color: #333; background-color: #f9f9f9; border-color: #ccc; border: 1px solid; text-align: center; cursor: pointer; color: #5e5e5e; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefefe), color-stop(100%, #f9f9f9)), #f9f9f9; background: -moz-linear-gradient(#fefefe, #f9f9f9), #f9f9f9; background: -webkit-linear-gradient(#fefefe, #f9f9f9), #f9f9f9; background: linear-gradient(#fefefe, #f9f9f9), #f9f9f9; border-color: #c3c3c3 #c3c3c3 #bebebe; -moz-box-shadow: rgba(0, 0, 0, 0.06) 0 1px 0, rgba(255, 255, 255, 0.1) 0 1px 0 0 inset; -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0 1px 0, rgba(255, 255, 255, 0.1) 0 1px 0 0 inset; box-shadow: rgba(0, 0, 0, 0.06) 0 1px 0, rgba(255, 255, 255, 0.1) 0 1px 0 0 inset; }

Related: See More


Questions / Comments: