Code Snippet: | Bootstrap 4 Login Modal |
Author: | Cristina |
Official website: | Go to website |
Published: | 6 months ago |
Views: | 5,653 |
Do you want a login form in Bootstrap 4 modal popup? Yes! this lightweight code snippet might be helpful for you to build a login form in the modal. It comes with a modern design concept that can be further customized according to your needs.
How to Create Login Form in Bootstrap Modal
1. First of all, load the Bootstrap 4 CSS and Font Awesome CSS in the head section of your HTML page in order to create a login form modal popup.
<!-- Bootstrap CSS --> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'> <!-- Font Awesome CSS --> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>
2. Now, create a button that will be used to trigger the modal popup.
<div class="container"> <button type="button" class="btn btn-info btn-round" data-toggle="modal" data-target="#loginModal"> Login </button> </div>
3. Similarly, create the HTML structure for login form and place it inside the Bootstrap modal’s markup.
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header border-bottom-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-title text-center"> <h4>Login</h4> </div> <div class="d-flex flex-column text-center"> <form> <div class="form-group"> <input type="email" class="form-control" id="email1"placeholder="Your email address..."> </div> <div class="form-group"> <input type="password" class="form-control" id="password1" placeholder="Your password..."> </div> <button type="button" class="btn btn-info btn-block btn-round">Login</button> </form> <div class="text-center text-muted delimiter">or use a social network</div> <div class="d-flex justify-content-center social-buttons"> <button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Twitter"> <i class="fab fa-twitter"></i> </button> <button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Facebook"> <i class="fab fa-facebook"></i> </button> <button type="button" class="btn btn-secondary btn-round" data-toggle="tooltip" data-placement="top" title="Linkedin"> <i class="fab fa-linkedin"></i> </button> </di> </div> </div> </div> <div class="modal-footer d-flex justify-content-center"> <div class="signup-section">Not a member yet? <a href="#a" class="text-info"> Sign Up</a>.</div> </div> </div> </div>
4. Style your modal login form with some additional CSS.
.container { padding: 2rem 0rem; } @media (min-width: 576px) { .modal-dialog { max-width: 400px; } .modal-dialog .modal-content { padding: 1rem; } } .modal-header .close { margin-top: -1.5rem; } .form-title { margin: -2rem 0rem 2rem; } .btn-round { border-radius: 3rem; } .delimiter { padding: 1rem; } .social-buttons .btn { margin: 0 0.5rem 1rem; } .signup-section { padding: 0.3rem 0rem; }
5. Now, load the jQuery JavaScript library, Popper, and Bootstrap JS just before the closing of the body tag.
<!-- jQuery --> <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script> <!-- Popper JS --> <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script> <!-- Bootstrap JS --> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
6. Finally, initialize the Bootstrap modal in the jQuery document ready function.
$(document).ready(function() { $('#loginModal').modal('show'); $(function () { $('[data-toggle="tooltip"]').tooltip() }) });
All you’ve done! if you need any further help, let us know by comment below.
Leave a Reply