Bootstrap 4 Modal Popup Login Form Tutorial & Demo

Bootstrap 4 Modal Popup Login Form
Code Snippet:Bootstrap 4 Login Modal
Author: Cristina
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 78,514
License: MIT
Edit Code online: View on CodePen
Read More

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.

5 thoughts on “Bootstrap 4 Modal Popup Login Form Tutorial & Demo”

  1. Good day,
    Thank you for sharing this script.
    Can this login popup modal be used with Shopify? If so, is there a .liquid code that’s required to use this with my current theme?

    Thank you!

    Reply
    • Hi Beauti Blends!
      You can place the Shopify login form liquid code inside the modal body.

      <div class="modal-body">
      {% form 'customer_login' %}
        
      {{ form_errors | default_errors }}
        
      <div class="email">
          
      <label for="email">Email</label>
          
      <input type="email" name="customer[email]">
        
      </div>
        
      <div class="password">
          
      <label for="password">Password</label>
          
      <input type="password" name="customer[password]">
        
      </div>
        
      <div class="submit">
          
      <input type="submit" value="Sign in">
        
      </div>
      {% endform %}
      </div>
      
      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X