<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 ----------> <div class="container-fluid top-nav text-right"><a href="#" class="text-uppercase" data-toggle="modal" data-target="#login-modal">Login</a><a class="text-uppercase" href="#" data-toggle="modal" data-target="#register-modal">Register</a></div> <div id="login-modal" class="modal fade" role="dialog"> <div class="modal-dialog margin-auto"> <div class="modal-content"> <div class="modal-body"> <h2 class="text-center text-uppercase">Login to Your Account</h2> <form> <div class="form-group"> <input type="text" class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <div class="form-group"> <input type="submit" class="form-control btn-primary" value="Login"> </div> </form> <p><a class="small modal-links" href="#" data-dismiss="modal" data-toggle="modal" data-target="#register-modal">Register</a><a class="small modal-links" href="#" data-dismiss="modal" data-toggle="modal" data-target="#forget-modal">Forget Password</a></p> </div> </div> </div> </div> <div id="register-modal" class="modal fade" role="dialog"> <div class="modal-dialog margin-auto"> <div class="modal-content"> <div class="modal-body"> <h2 class="text-center text-uppercase">Register to Your Account</h2> <form> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <input type="text" class="form-control" id="email" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <div class="form-group"> <input type="password" class="form-control" id="confirm-password" placeholder="Confirm Password"> </div> <div class="form-group"> <input type="submit" class="form-control btn-primary" value="Login"> </div> </form> <p><a class="small modal-links" href="#" data-dismiss="modal" data-toggle="modal" data-target="#login-modal">Login</a><a class="small modal-links" href="#" data-dismiss="modal" data-toggle="modal" data-target="#forget-modal">Forget Password</a></p> </div> </div> </div> </div> <div id="forget-modal" class="modal fade" role="dialog"> <div class="modal-dialog margin-auto"> <div class="modal-content"> <div class="modal-body"> <h2 class="text-center text-uppercase">Forget Your Password</h2> <form> <p class="small">Enter your Email Address that you used to register. We'll send you an email with your username and a link to reset your password.</p> <div class="form-group"> <input type="text" class="form-control" id="email" placeholder="Email"> </div> </form> </div> </div> </div> </div>

a{color:#000;} a:hover, a:focus, a:active{color:#000; text-decoration:none;} .margin-auto{margin:10px auto;} .top-nav{padding:10px 0; background:#ccc;} .top-nav a{margin-right:10px; color:#999;} .top-nav a:hover{color:#000; text-decoration:underline;} .modal-dialog{max-width:340px;} .modal-content{box-shadow:3px 3px 6px #757272; background:#f7f7f7; border-radius:0px;} .modal-body h2{font-size:18px; margin-top:35px; margin-bottom:20px;} .form-control{border-radius:0px;} .modal-links{ color:#999; margin-right:10px;}