<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="span12">
<a data-toggle="modal" class="btn" href="#loginModal">Log in</a>
<div class="modal hide" id="loginModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">✕</button>
<h3>Login to Website</h3>
</div>
<div class="modal-body" style="text-align:center;">
<div class="row-fluid">
<div class="span10 offset1">
<div id="modalTab">
<div class="tab-content">
<div class="tab-pane active" id="login">
<form method="post" action='' name="login_form">
<p><input type="text" class="span12" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span12" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
<a href="#forgotpassword" data-toggle="tab">Forgot Password?</a>
</p>
</form>
</div>
<div class="tab-pane fade" id="forgotpassword">
<form method="post" action='' name="forgot_password">
<p>Hey this stuff happens, send us your email and we'll reset it for you!</p>
<input type="text" class="span12" name="eid" id="email" placeholder="Email">
<p><button type="submit" class="btn btn-primary">Submit</button>
<a href="#login" data-toggle="tab">Wait, I remember it now!</a>
</p>
</form>
