in this example you click on link then open login form for login. this example design with bootstrap 4 modal. we are use bootstrap 4 modal with login form design with forgate password link. this login form design look like professional. you can easaily implement in your project.

you can get code of popup login form using bootstrap snippet. we give you example of login modal popup , you can simple copy bellow code and use in your project. If it free snippets of bootstrap modal registration form example So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap modal popup on button click snippets, click on JS Code tab get code of jquery codd for popup login form using bootstrap snippets, same as for CSS Code tab. It's pretty easy and simple example of popup signin form bootstrap snippet.


<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="open-modal text-center"> <a href="#myModal" class="btn btn-danger trigger-btn" data-toggle="modal">Click to Open Login Modal</a> </div> <div id="myModal" class="modal fade text-center"> <div class="modal-dialog"> <div class="col-lg-8 col-sm-8 col-12 main-section"> <div class="modal-content"> <div class="col-lg-12 col-sm-12 col-12 user-img"> <img src="/demo/man01.png"> </div> <div class="col-lg-12 col-sm-12 col-12 user-name"> <h1>User Login</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="col-lg-12 col-sm-12 col-12 form-input"> <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password"> </div> <button type="submit" class="btn btn-success">Login</button> </form> </div> <div class="col-lg-12 col-sm-12 col-12 link-part"> <a href="http://www.nicesnippets.com" target="_blank">Forgot Password?</a> </div> </div> </div> </div> </div> </body> </html>
body{ font-family: 'Barlow Semi Condensed', sans-serif; } .main-section{ margin: 0 auto; margin-top:100px; background-color: #fff; border-radius: 5px; padding: 0px; } .user-img{ margin-top:-50px; } .user-img img{ height: 100px; width: 100px; } .user-name{ margin:10px 0px; } .user-name h1{ font-size:30px; color:#676363; } .user-name button{ position: absolute; top:-50px; right:20px; font-size:30px; } .form-input button{ width: 100%; margin-bottom: 20px; } .link-part{ border-radius:0px 0px 5px 5px; background-color: #ECF0F1; padding:15px; border-top:1px solid #c2c2c2; } .open-modal{ margin-top:100px !important; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post