"Google Style Login"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-sm-6 col-md-4 col-md-offset-4"> <h1 class="text-center login-title">Sign in to continue to Bootsnipp</h1> <div class="account-wall"> <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <form class="form-signin"> <input type="text" class="form-control" placeholder="Email" required autofocus> <input type="password" class="form-control" placeholder="Password" required> <button class="btn btn-lg btn-primary btn-block" type="submit"> Sign in</button> <label class="checkbox pull-left"> <input type="checkbox" value="remember-me"> Remember me </label> <a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span> </form> </div> <a href="#" class="text-center new-account">Create an account </a> </div> </div> </div>
.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall { margin-top: 20px; padding: 40px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .login-title { color: #555; font-size: 18px; font-weight: 400; display: block; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .need-help { margin-top: 10px; } .new-account { display: block; margin-top: 10px; }

Related: See More


Questions / Comments:

Wow! Awesome work!

nwinger () - 10 years ago - Reply -1


I am not sure when this started happening, but does anyone else notice that the 'Remember me' checkbox falls outside of the 'form-signin' div with the latest version of bootstrap. What is the best way to fix this following bootstrap standards? Please see this demo link posted on the github page for this form: http://jsfiddle.net/esbanar.... The only temporary fix that I could temporarily come up with is adding the following style which I know is incorrect 'checkbox checkbox-inline pull-left'.

bluetea55z . () - 8 years ago - Reply 0


help me out here it doesnt work on my ide

muzi () - 8 years ago - Reply 0


Could you please post more details? Thanks!

maxsurguy () - 8 years ago - Reply 0


Nice, I liked this one so I forked it myself. I extended this so that it is "tabbed" like google login so you can select account, and register etc etc.

See here: http://bootsnipp.com/snippe...

Lord Steve King () - 9 years ago - Reply 0


looks awesome, thanks!

maxsurguy () - 9 years ago - Reply 0


I notice when the browser is at about 805px the div account-wall loses it's fixed width. Guessing it's a media query thing, anyway to fix this?

Karl L () - 9 years ago - Reply 0


Really nice snippet ! Thanks a lot !

Can you make an other one with input group ?

Julien () - 10 years ago - Reply 0


This displays fine on all browsers but Internet Explorer. I noticed on you demo it looks fine on IE. How did you get this to look good on IE. I copied the CSS and HTML exactly as it is here. Here is a link to how mine looks. http://wikicopy.com/loginpr...

Alex Grzywinski () - 10 years ago - Reply 0


Perfect! Big thanks!

Drew () - 10 years ago - Reply 0


Fantastic execution... Nice one!

Adedoyin Kassem () - 10 years ago - Reply 0


This is great but how can I reduce the width without affecting my main container?

Shane () - 10 years ago - Reply 0


Try adding a container within the main container

Roderick Silva () - 10 years ago - Reply 0


thanks!

Selman Kahya () - 10 years ago - Reply 0


Thanks man. 5++!
Can you also make a stylish registration like this?

Mika () - 10 years ago - Reply 0


Here's kind of like that : http://bootsnipp.com/snippe...

maxsurguy () - 10 years ago - Reply 0


Thanks!

Chux () - 10 years ago - Reply 0


Awesome. Thanks :)

Ermand Duro () - 10 years ago - Reply 0


awesome bro ^_^

Sendy () - 10 years ago - Reply 0