Please support us by disabling ad blocker for ...

Bootstrap Login Modal Popup with Facebook, Twitter, Google and Linkdin Login Buttons

Posted by & filed under CSS, HTML5, JQUERY.

In modern web development space utilization and beauty site taken much consideration while designing. So Recent web development modal popup for login so popular. I made modal popup design using Twitter Bootstarp..

Please refer my latest tutorial on Bootstrap Login Modal Popup.

Login, Sing Up & Forget Pasword Modal Form Using Bootstrap



Bootstrap Login Modal Popup with Facebook, Twitter, Google and Linkdin Login Buttons

Bootstrap Login Modal Popup with Facebook, Twitter, Google and Linkdin Login Buttons

Step 1:

Create index.html file, and add following css and js files in it.

<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>



Step 2:

Now add folowing html markup for maodal popup in the index.html file.

<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">Twitter 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

<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">&times;</button>
        		<h2 class="modal-title" id="myModalLabel">Login to Your Account</h2>
      		<div class="modal-body login-modal">
      			<p>Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required</p>
      			<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 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>

		            	<a href="#" class="btn btn-success modal-login-btn">Login</a>
		            	<a href="#" class="login-link text-center">Lost your password?</a>

	        		<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 id='center-line'> OR </div>
        		<div class="clearfix"></div>

        		<div class="form-group modal-register-btn">
        			<button class="btn btn-default"> New User Please Register</button>
      		<div class="clearfix"></div>
      		<div class="modal-footer login_modal_footer">

Step 3:

Here css styles for the modal popup.

    color: #888888;
    font-family: 'Bree Serif',serif;
    font-size: 16px;
    min-height: 2000px;

.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_header, .login_modal_footer {background: #00BB64 !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: 265.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%; }
h1{border-bottom:5px solid #00BB64;}






Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

  • Anugeeta

    How can we make the modal responsive?

  • mail sent successfully but not delivared.

  • Jesse Farmer

    Facebook login doesn’t work. I came here, trying to figure out how to get the Facebook popups to work when you’re not logged in. Does anyone know how to do that?

  • Jesse Farmer

    No, I get it. I’m saying you can’t actually log into Facebook from a Bootstrap Modal. I get that you can mock it up.

    Well, I’m not saying you can’t. I am saying I haven’t been able to figure it out yet. Have you? Do you have authentication through a tb modal with fb working anywhere?


  • Phoenix

    Hi muni,
    I have several silly questions to ask;
    1. I’m using Moodle; is yr script compatible to my moodle site?
    2. Just create index.html including the files as you guided and upload to my server?
    3. How can I place yr LOGIN/SIGNUP as this website or replace the default moodle LOGIN with yr LOGIN/SIGNUP?

  • Poetensai Shugoi

    thank for great code..but how i install face in my web thank

Get Instant Script Download Access!