"center login page"
Bootstrap 3.3.0 Snippet by oliuz

<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="login-box"> <div class="login-logo"> <a href="http://ichef-1.bbci.co.uk/news/660/cpsprodpb/17A21/production/_85310869_85310700.jpg"><img src="https://www.google.com/images/icons/material/product/1x/analytics_64dp.png" alt="My Ad Cubes"></a> </div><!-- /.login-logo --> <div class="login-box-body"> <p class="login-box-msg">Sign in to start your session</p> <form action="http://myadcubes.com/index.php/user/auth/login" method="post" accept-charset="utf-8"> <div class="form-group has-feedback"> <input type="text" name="login" value="" placeholder="Username" class="form-control" id="login" maxlength="80" size="30"> <span class="glyphicon glyphicon-user form-control-feedback"></span> <span><font color="red"></font></span> </div> <div class="form-group has-feedback"> <input type="password" name="password" value="" placeholder="Password" class="form-control" id="password" size="30"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> <span><font color="red"></font></span> </div> <div class="row"> <div class="col-xs-8"> <div class="checkbox icheck"> <label> <div class="icheckbox_square-blue" aria-checked="false" aria-disabled="false" style="position: relative;"> <input type="checkbox" name="remember" value="" id="remember" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);" ><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins> </div> <label for="remember" class="">Remember me</label> </label> </div> </div><!-- /.col --> <div class="col-xs-4"> <input type="submit" name="submit" value="Sign In" id="submit" class="btn btn-primary btn-block btn-flat"> </div><!-- /.col --> </div> </form> <a href="http://myadcubes.com/user/auth/forgot_password">I forgot my password</a><br> <a href="http://myadcubes.com/user/auth/register/" class="text-center">Register a new membership</a> </div><!-- /.login-box-body --> </div>
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700"); @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"); @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 300; src: local('Dosis Light'), local('Dosis-Light'), url(http://fonts.gstatic.com/l/font?kit=RoNoOKoxvxVq4Mi9I4xIReCW9eLPAnScftSvRB4WBxg&skey=a88ea9d907460694) format('woff2'); } @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; src: local('Dosis Medium'), local('Dosis-Medium'), url(http://fonts.gstatic.com/l/font?kit=Z1ETVwepOmEGkbaFPefd_-CW9eLPAnScftSvRB4WBxg&skey=21884fc543bb1165) format('woff2'); } body { background: #d2d6de; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif, Open Sans; font-size: 14px; line-height: 1.42857; height: 350px; padding: 0; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; overflow-x: hidden; overflow-y: auto; } .form-control { background-color: #ffffff; background-image: none; border: 1px solid #999999; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #333333; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } .login-box, .register-box { width: 360px; margin: 7% auto; }.login-page, .register-page { background: #d2d6de; } .login-logo, .register-logo { font-size: 35px; text-align: center; margin-bottom: 25px; font-weight: 300; }.login-box-msg, .register-box-msg { margin: 0; text-align: center; padding: 0 20px 20px 20px; }.login-box-body, .register-box-body { background: #fff; padding: 20px; border-top: 0; color: #666; }.has-feedback { position: relative; } .form-group { margin-bottom: 15px; }.has-feedback .form-control { padding-right: 42.5px; }.login-box-body .form-control-feedback, .register-box-body .form-control-feedback { color: #777; } .form-control-feedback { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; pointer-events: none; }.checkbox, .radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; }.icheck>label { padding-left: 0; } .checkbox label, .radio label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; }

Related: See More


Questions / Comments: