Bootstrap login form in modal
home
Run
screen_rotation
fullscreen
cloud_download
<html> <head> <title>Bootstrap Login Form in Modal</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <style> /* custom css style starts here */ .login-header{ background: #880e4f; color:#fff; } </style> </head> <body> <!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header login-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Login</h4> </div> <div class="modal-body"> <!---login form starts here--> <form role="form"> <div class="form-group"> <label for="email">Email</label> <input type="text" name= "email" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Sign In</button> <div class="row"> <div class="col-xs-7 col-sm-7 col-md-7"> <a href="#" class="btn btn-link">Forgot Password?</a> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <a href="#" class="btn btn-link">Register</a> </div> </div> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tutorialsplaneModal">Login </button> </body> </html>
<html> <head> <title>Bootstrap Login Form in Modal</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <style> /* custom css style starts here */ .login-header{ background: #880e4f; color:#fff; } </style> </head> <body> <!----modal starts here---> <div id="tutorialsplaneModal" class="modal fade" role='dialog'> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header login-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> <h4 class="modal-title">Login</h4> </div> <div class="modal-body"> <!---login form starts here--> <form role="form"> <div class="form-group"> <label for="email">Email</label> <input type="text" name= "email" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Sign In</button> <div class="row"> <div class="col-xs-7 col-sm-7 col-md-7"> <a href="#" class="btn btn-link">Forgot Password?</a> </div> <div class="col-xs-4 col-sm-4 col-md-4"> <a href="#" class="btn btn-link">Register</a> </div> </div> </div> </div> </div> </div> <!--Modal ends here---> <!----add button to trigger the modal----> <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tutorialsplaneModal">Login </button> </body> </html>
Copyrights@tutorialsplane.com