"Login page responsive bootstrap"
Bootstrap 3.0.0 Snippet by Anita26

<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 ----------> <!-- login-form --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="content"> <div class="container"> <div class="box"> <div class="row"> <div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-12 col-xs-12 "> <div class="box-body"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-6 col-xs-12 mb20"> <h3 class="mb10">Login</h3> </div> <!-- form --> <form> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only" for="email"></label> <div class="login-input"> <input id="email" name="emaol" type="text" class="form-control" placeholder="Enter your email id" required> <div class="login-icon"><i class="fa fa-user"></i></div> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="control-label sr-only"></label> <div class="login-input"> <input name="password" type="password" class="form-control" placeholder="******" required> <div class="login-icon"><i class="fa fa-lock"></i></div> <div class="eye-icon"><i class="fa fa-eye"></i></div> </div> </div> </div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb20 "> <button class="btn btn-primary btn-block mb10">Register</button> <div> <p>Have an Acount? <a href="#">Login</a></p> </div> </div> </form> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 "> <h4 class="mb20">Login With</h4> <div class="social-media"> <a href="#" class="btn-social-rectangle btn-facebook"><i class="fa fa-facebook"></i><span class="social-text">Facebook</span></a> <a href="#" class="btn-social-rectangle btn-twitter"><i class="fa fa-twitter"></i><span class="social-text">Twitter</span> </a> <a href="#" class="btn-social-rectangle btn-googleplus"><i class="fa fa-google-plus"></i><span class="social-text">Google Plus</span></a> </div> </div> <!-- /.form --> </div> </div> </div> <!-- features --> <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 "> <div class="box-body"> <div class="feature-left"> <div class="feature-icon"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_1.png" alt=""> </div> <div class="feature-content"> <h4>Loyalty Points</h4> <p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p> </div> </div> <div class="feature-left"> <div class="feature-icon"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_2.png" alt=""> </div> <div class="feature-content"> <h4>Instant Checkout</h4> <p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p> </div> </div> <div class="feature-left"> <div class="feature-icon"> <img src="https://easetemplate.com/free-website-templates/mobistore/images/feature_icon_3.png" alt=""> </div> <div class="feature-content"> <h4>Exculsive Offers</h4> <p>Aenean lacinia dictum risvitae pulvinar disamer seronorem ipusm dolor sit manert.</p> </div> </div> </div> </div> <!-- /.features --> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> Created for <a href="https://goo.gl/mwiEhG" target="_blank">easetemplate</a> </div></div> </div> </div> </div> <!-- /.login-form -->
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Roboto Condensed', sans-serif; letter-spacing: 0px; font-size: 16px; color: #848687; font-weight: 400; line-height: 30px; background-color: #f3f5f7; } h1, h2, h3, h4, h5, h6 { color: #1c1e1e; margin: 0px 0px 15px 0px; font-weight: 400; font-family: 'Roboto Condensed', sans-serif; } h1 { font-size: 30px; line-height: 42px; } h2 { font-size: 24px; line-height: 32px; } h3 { font-size: 22px; line-height: 30px; } h4 { font-size: 18px; line-height: 26px; } h5 { font-size: 14px; font-weight: 400; } h6 { font-size: 12px; font-weight: 400; } p { margin: 0 0 24px; line-height: 1.8; } p:last-child { margin: 0px; } ul, ol { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; color: #1c1e1e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #fb730f; } .box { } .box-head { background-color: #ffffff; border-bottom: 1px solid #f3f5f7 } .head-title { padding: 16px 30px; margin-bottom: 0px; } .box-body { background-color: #ffffff; padding: 30px; margin-bottom: 30px; } .mb20{margin-bottom:20px;} .mb10{margin-bottom:10px;} .content{padding-top:40px; padding-bottom:40px;} label { } .control-label { font-size: 13px; text-transform: capitalize; color: #3c424b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .form-control:focus { } .textarea.form-control { } .required { } .form-group { margin-bottom: 5px; } .form-control { border-radius: 3px; color: #656869; font-size: 13px; font-weight: 400; width: 100%; height: 52px; padding: 12px 16px; line-height: 1.42857143; border: 2px solid #e8ecf0; background-color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075); } .form-control:focus { border-color: #a5a8ab; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .input-group { position: relative; display: table; border-collapse: separate; } input[type=checkbox], input[type=radio] { margin: 8px 0 0; margin-top: 1px\9; line-height: normal; } input::-webkit-input-placeholder {color: #a6a7a8 !important; opacity: 1; } input:focus::-webkit-input-placeholder { opacity: 0; transition: 1s ease; } textarea::-webkit-input-placeholder { color: #a6a7a8 !important; } .input-group-addon { background-color: transparent; border: 1px solid #e8ecf0; border-radius: 0px; } .focus { border: 2px solid #e8ecf0; background-color: #fff; } .focus:focus { border-color: #e8ecf0; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .login-input { position: relative; margin-bottom: -21px; } .login-input .form-control { background-color: #f4f7f9; padding-left: 35px; } .login-icon { display: inline-block; position: relative; bottom: 51px; left: 18px; font-size: 14px } .eye-icon { position: absolute; bottom: 52px; right: 18px; font-size: 14px } .btn-social-rectangle, .btn-facebook .btn-twitter .btn-googleplus { font-size: 14px; margin-right: 6px; display: inline-block; line-height: 1.2; padding: 14px 16px; margin-bottom: 10px; border-radius: 3px; } .social-text { font-size: 14px; text-transform: uppercase; padding-left: 6px; letter-spacing: 1px; } .btn-twitter { background: #00aced; color: #fff; } .btn-twitter:hover, .btn-twitter:active { background: #0084b4; color: #fff; } .btn-facebook { background: #3B5997; color: #fff; } .btn-facebook:hover, .btn-facebook:active { background: #2d4372; color: #fff; } .btn-googleplus { background: #D64937; color: #fff; } .btn-googleplus { background: #D64937; color: #fff; } .btn-googleplus:hover, .btn-googleplus:active { background: #b53525; color: #fff; } .btn { font-family: 'Roboto Condensed', sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 700; padding: 14px 26px; border-radius: 4px; line-height: 2; letter-spacing: 2px; border: transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; } .btn-primary { background-color: #fb730f; color: #fff; } .btn-primary:hover { background-color: #ed6908; color: #fff; } .btn-primary.focus,.btn-primary:focus { background-color: #ed6908; color: #fff; } .feature-left { margin-bottom: 20px; border-bottom: 1px solid #f4f7f9; } .feature-left:last-child { margin-bottom: 0px; border-bottom: transparent; } .feature-left .feature-icon { float: left; padding-top: 16px; } .feature-left .feature-content { padding-top: 8px; padding-left: 70px; padding-bottom: 20px; }

Related: See More


Questions / Comments: