"login with social icons"
Bootstrap 3.0.0 Snippet by prabuanan

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Login</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/login.css" rel="stylesheet" type="text/css"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> </head> <body> <div id="login_form"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="panel panel-login login_block"> <div class="row"> <div class="col-lg-12"> <div class="centerLoginContent"> <form name="loginForm" action="/login" method="post"> <input type="hidden" name="initialURI" value="/"> <h2 class="login_title">LOGIN</h2> <div class=""> <p class="login_text">Enter your Username and password <span>to sign in</span></p> <!-- <div class="signinFail"><i class="uiIconError"></i>Signing in Error</div> <div class="signinFail"><i class="uiIconError"></i>Signing in Error</div> --> <div class="form-group"> <label for="username">User Name<span class="err_cls">*</span></label> <input class="username form-control" tabindex="1" id="username" name="username" type="text" placeholder="Username" onblur="this.placeholder = 'Username'" onfocus="this.placeholder = ''"/> </div> <div class="form-group"> <label for="password">Password<span class="err_cls">*</span></label> <input class="password form-control" tabindex="2" type="password" id="password" name="password" placeholder="Password" onblur="this.placeholder = 'Password'" onfocus="this.placeholder = ''"/> </div> <div class="col-xs-6 form-group pull-right login_button"> <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn login_submit_btn" value="Show"> </div> </div> </form> </div> </div> </div> <div class="panel-heading"> <div class="row"> <div class="col-xs-6 text-center"> <a href="/forgotPassword" title="ForgotPassword"><div class="forgot_password">Forgot Password ?</div></a> </div> <div class="text-center"> <div id="UIPortalLoginFormAction" class="loginButton"> <button class="button_login" tabindex="4" onclick="login();">Login</button> </div> </div> </div> </div> <div class=""> <div class=""> <div id="social-login"> <p class="linkedin_bgcolor"> <a class="btn-block btn-social btn-linkedin" href="javascript:void(0)" onclick="/social"> <i class="fa fa-facebook" aria-hidden="true"></i><span class="fb_left">Sign in with facebook</span> </a></p> <p class="googleplus_bgcolor"> <a class="btn-block btn-social btn-linkedin" href="javascript:void(0)" onclick="/social"> <i class="fa fa-google-plus"></i> <span class="g_plus">Sign in with Google</span> </a></p> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body { color: #333333; background-color: #cdcdcd; } .panel { border-radius: 0px } /* custom login css */ .login_title { margin: 0px; text-align: center; background: #efefef; font-size: 18px; padding: 20px 0px 20px 0px; } .login_block { border-radius: 0px; } .login_text { text-align: center; font-size: 12px; color: #8b8b8b; margin: 10px 4px 22px 10px; border-bottom: 1px solid #efefef; padding: 12px 0px 24px 0px; } .login_text span { font-weight: bold; } .err_cls { color: red; } .login_block .form-control { font-size: 17px; border-bottom: 1px solid #e5e5e5; border-radius: 0px; border-left: 0px solid #ccc; border-right: 0px solid red; border-top: 0px solid red; padding: 0px; box-shadow: inset 0 0px 0px rgba(0,0,0,.075); -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.075); } .login_button { position: absolute; bottom: 0px; right: 13px; width: 26%; background: transparent; } .login_submit_btn { background: transparent; border-left: 1px solid #efefef !important; margin-bottom: 11px; border-bottom: 0px !important; height: 36px; } .login_block .form-group label { padding-left: 20px; } #username { padding-left: 20px; } #password { padding-left: 20px; } .forgot_password { color: #f45044; } .button_login { background-color: #4caf50; color: white; border: 0px; padding: 6px 9px; width: 145px; height: 35px; } /* linked in css */ .linkedin_bgcolor { background: #385899; margin: 0px; } .linkedin_bgcolor a { text-align: left; color: #fff; text-decoration: none; } .linkedin_bgcolor a i { background: #243b68; padding: 20px; color: #fff; height: 50px; width: 50px; } /* google plus */ .googleplus_bgcolor { background: #de4936; margin: 0px 0px 0px 0px; } .googleplus_bgcolor a { text-align: left; color: #fff; text-decoration: none; } .googleplus_bgcolor a i { background: #b72b19; padding: 20px; color: #fff; height: 50px; width: 50px; } #social-login { margin-bottom: -2px; } #login_form .container { width: 48%; margin-top: 7%; } .fb_left { margin-left: 31%; } .g_plus { margin-left: 31%; } .loginButton { margin: 0 auto; display: block; text-align: center; } /* password rest */ .forgot_pass { text-align: left; font-size: 12px; color: #8b8b8b; margin: 10px 4px 0px 4px; border-bottom: 0px solid #efefef; padding: 12px 0px 24px 0px; } .forgot_pass span { font-weight: bold; }

Questions / Comments: