"Bootstrap Login Modal With Social Media"
Bootstrap 3.3.0 Snippet by code-bash

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Bootstrap Modal Login Popup - Social Login Popup </title> <meta name="description" content="Twitter Bootstrap Modal Login Popup - Social Login Popup "> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/font-awesome.min.css"/> <link rel="stylesheet" href="css/style.css" /> <script src="js/vendor/modernizr-2.6.2.min.js"></script> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <div class="container-fluid"> <div class="row"> <div class="col-md-offset-4 col-lg-offset-4 col-md-4 col-lg-4"> <h1 class="text-center">Bootstrap Modal Login Popup</h1> <button id='modal-launcher' class="btn btn-primary btn-lg" data-toggle="modal" data-target="#login-modal"> Please sign In - Modal </button> </div> </div> </div> </body> </html> <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header login_modal_header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title" id="myModalLabel">Login to Your Account</h2> </div> <div class="modal-body login-modal"> <p>Awesome Popup Modal</p> <br/> <div class="clearfix"></div> <div id='social-icons-conatainer'> <div class='modal-body-left'> <div class="form-group"> <input type="text" id="username" placeholder="Enter your name" value="" class="form-control login-field"> <i class="fa fa-user login-field-icon"></i> </div> <div class="form-group"> <input type="password" id="login-pass" placeholder="Password" value="" class="form-control login-field"> <i class="fa fa-lock login-field-icon"></i> </div> <a href="#" class="btn btn-success modal-login-btn">Login</a> <a href="#" class="login-link text-center">Lost your password?</a> </div> <div class='modal-body-right'> <div class="modal-social-icons"> <a href='#' class="btn btn-default facebook"> <i class="fa fa-facebook modal-icons"></i> Sign In with Facebook </a> <a href='#' class="btn btn-default twitter"> <i class="fa fa-twitter modal-icons"></i> Sign In with Twitter </a> <a href='#' class="btn btn-default google"> <i class="fa fa-google-plus modal-icons"></i> Sign In with Google </a> <a href='#' class="btn btn-default linkedin"> <i class="fa fa-linkedin modal-icons"></i> Sign In with Linkedin </a> </div> </div> <div id='center-line'> OR </div> </div> <div class="clearfix"></div> <div class="form-group modal-register-btn"> <button class="btn btn-default"> New User Please Register</button> </div> </div> <div class="clearfix"></div> <div class="modal-footer login_modal_footer"> </div> </div> </div> </div>
body{ color: #888888; font-family: 'Bree Serif',serif; font-size: 16px; min-height: 2000px; } .login_modal_footer{margin-top:5px;} .login_modal_header .modal-title {text-align: center;font-family:'Philosopher',sans-serif; } .form-group{position: relative;} .form-group .login-field-icon { font-size: 20px; position: absolute; right: 15px; top: 3px; transition: all 0.25s ease 0s; padding-top: 2%; } .login-modal{ width:100%; padding-bottom:20px; } .login_modal_header, .login_modal_footer {background: #0089bb !important;color:#fff;} .modal-register-btn{margin: 4% 33% 2% 33% ;width:100%;} .login-modal input{height:40px; box-shadow: none; border:1px solid #ddd;} .modal-body-left{float:left; width:50%; padding-right:4%; border-right:4px solid #ddd;} .modal-body-right{float:right; width:47%;} .login-link{padding:0 20%;} .modal-social-icons{padding:0 10%;} .facebook, .twitter, .google, .linkedin {width:100%;height:40px; padding-top:2%; margin-top:2%;} .modal-icons{margin-left: -10px; margin-right: 20px;} .google, .google:hover{background-color:#dd4b39;border:2px solid #dd4b39;color:#fff;} .twitter, .twitter:hover{ background-color: #00aced; border:2px solid #00aced;color: #fff;} .facebook, .facebook:hover{background-color: #3b5999; border:2px solid #3b5999;color:#fff;} .linkedin, .linkedin:hover{background-color: #007bb6; border: 2px solid #007bb6; color:#fff;} #social-icons-conatainer{position: relative;} #center-line{position: absolute; right: 270.7px;top: 80px;background:#ddd; border: 4px solid #DDDDDD;border-radius: 20px;} .modal-login-btn{width:100%;height:40px; margin-bottom:10px;} #modal-launcher{margin: 30% 0 0 30%; } .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success { color: #fff; background-color: #0089bb; border-color: #0089bb; } .btn-success { color: #fff; background-color: #0089bb; border-color: #0089bb; }

Related: See More

Material Kit PRO BS3
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: