Bootstrap 4 Modal Popup Login Form Tutorial & Demo
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>
</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.