<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container top-margin"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <div class="well"> <div class="row"> <div class="col-xs-12"> </div> </div> <div class="row"> <div class="col-xs-12"> <h3 class="heading text-center">Login to <a href="https://superbootstrap.com">SuperBootstrap</a></h3> <div class="row"> <div class="col-md-5 text-center oauth-links"> <a class="btn btn-primary btn-lg" href="/users/auth/google_oauth2"><i class="fa fa-google"></i> Login with Google</a> <p class="text-justify text-muted margin-top-10">Sign in / Sign up with your google account. We will never post anything on your behalf.</p> </div> <div class="col-md-7 user-form"> <form accept-charset="UTF-8" action="/users/login" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="3hJkV8PLPzEwtxLoC7DLp/y8N6alTouFrIjchhPBtWA="></div> <fieldset> <div class="form-group"> <label class="col-lg-3 control-label" for="user_email">Email</label> <div class="col-lg-9"> <input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" type="email" value=""> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label" for="user_password">Password</label> <div class="col-lg-9"> <input class="form-control" id="user_password" name="user[password]" type="password"> </div> </div> <div><input class="btn btn-primary btn-sm pull-right" name="commit" type="submit" value="Sign in"></div> </fieldset> </form> <div class="pull-left"> <a href="/users/register">Sign up</a><br> <a href="/users/password/new">Forgot your password?</a><br> <a href="/users/confirmation/new">Resend Confirmation Email</a><br> </div> </div> </div> </div> </div> </div> </div> </div> </div>

.heading { padding-bottom: 5px !important; border-bottom: 1px solid #aaaaaa; font-size: 24px; text-align: left; } @media screen and (min-width:992px){ .user-form { border-left: 1px solid #dddddd; } } .top-margin{ margin-top:100px; } .oauth-links { margin-top: 10px; } .btn { border-radius:0; }