If you’re looking for an easy way to add a login popup form to your Bootstrap 4 website, look no further! In this article, we’ll show you how to create a modal login popup in Bootstrap 4 that also work on Bootstrap version 5. We’ll also provide instructions on how to customize the appearance and functionality of the form. So, whether you’re looking to add a simple login form or want more control over the design and functionality, keep following this tutorial.
You know Bootstrap provides an excellent popup solution and so we will use the default popup functionality then add the form into the modal box. After that, we will apply for CSS to make it look perfect on any modern website design. Moreover, you can easily customize the both popup and form by editing the CSS as per your site design.
How to Create Modal Login Popup Form in Bootstrap
Now, let’s see how to create a login form in the Bootstrap 4 modal popup. We’ll use the default Bootstrap modal functionality to create a login form in the popup. Then we’ll add some CSS to make it look better.
1- The first step is to add the Bootstrap 4 CSS and Font Awesome CSS in the head section of the webpage. You can use CDN files as follows.
<!-- 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- Our next step is to create a button that will trigger the modal popup. To make the button look nice we will add some default button classes. If you want to create nice looking button then you can use Bootstrap Button with Icon and Text.
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#loginModal">
Please Click Me! to Popup
</button>
3- For the popup box, we will create an HTML structure and also place the login form source code inside the modal 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-primary 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-danger" data-toggle="tooltip" data-placement="top" title="Twitter"> <i class="fab fa-youtube"></i> </button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Facebook"> <i class="fab fa-instagram"></i> </button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Linkedin"> <i class="fab fa-whatsapp"></i> </button>
</div>
</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>
</div>
4- Bootstrap already have a lot of great styles that help you to design any HTML element. But we still need a little custom CSS to make the modal login form perfect on desktop and mobile.
@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- Make sure you have loaded 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- At the end, we need to initialize the Bootstrap modal by using the the jQuery document ready function.
$(document).ready(function() {
$('#loginModal').modal('show');
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
});
Conclusion
In the end, we hope this tutorial helped you to learn how to create a Bootstrap 4 popup login form. If you have any questions or suggestions, feel free to leave a comment below. Thanks for reading!
This is the end of the tutorial. Hope you find it helpful! 🙂