Modal Form

Bootstrap Modal Form

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors and to register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - a drop in UX quality and frustration of your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

See also: Modal Core Documentation, Modal Styles and Modal Templates.


Simple modal login

Guide your users to login on their account.

        
            

        <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="defaultForm-email" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="defaultForm-pass" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-default">Login</button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
            Modal Login Form</a>
        </div>

      
        
    

Simple modal register

Guide your users to create an account.

        
            

        <div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="orangeForm-name" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
                </div>
                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="orangeForm-email" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-lock prefix grey-text"></i>
                  <input type="password" id="orangeForm-pass" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-deep-orange">Sign up</button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">Launch
            Modal Register Form</a>
        </div>

      
        
    

Simple modal subscription

Use a simple modal subscription in which the user will be able to subscribe to the newsetter list.

        
            

        <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form mb-4">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-indigo">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscriptionForm">Launch
            Modal Subscription Form</a>
        </div>

      
        
    

Simple modal contact

Use modal contact to display a window with textarea and forms where the user can enter the necessary details.

        
            

        <div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body mx-3">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form34" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form34">Your name</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form29" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form29">Your email</label>
                </div>

                <div class="md-form mb-5">
                  <i class="fas fa-tag prefix grey-text"></i>
                  <input type="text" id="form32" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form32">Subject</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-pencil prefix grey-text"></i>
                  <textarea type="text" id="form8" class="md-textarea form-control" rows="4"></textarea>
                  <label data-error="wrong" data-success="right" for="form8">Your message</label>
                </div>

              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-unique">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm">Launch
            Modal Contact Form</a>
        </div>

      
        
    

Cascading modal register / login MDB Pro component

Use a modal that contains both a login and registration window.

        
            

        <!--Modal: Login / Register Form-->
        <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog cascading-modal" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Modal cascading tabs-->
              <div class="modal-c-tabs">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
                      Login</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
                      Register</a>
                  </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">
                  <!--Panel 7-->
                  <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body mb-1">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="modalLRInput10" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput10">Your email</label>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput11">Your password</label>
                      </div>
                      <div class="text-center mt-2">
                        <button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
                      </div>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-center text-md-right mt-1">
                        <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                        <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>

                  </div>
                  <!--/.Panel 7-->

                  <!--Panel 8-->
                  <div class="tab-pane fade" id="panel8" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput12">Your email</label>
                      </div>

                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput13">Your password</label>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
                        <label data-error="wrong" data-success="right" for="modalLRInput14">Repeat password</label>
                      </div>

                      <div class="text-center form-sm mt-2">
                        <button class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
                      </div>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-right">
                        <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                  <!--/.Panel 8-->
                </div>

              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: Login / Register Form-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded my-3" data-toggle="modal" data-target="#modalLRForm">Launch
            Modal LogIn/Register</a>
        </div>

      
        
    

Modal with avatar

The login modal can be combined with the avatar component.

        
            

        <!--Modal: Login with Avatar Form-->
        <div class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Header-->
              <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar" class="rounded-circle img-responsive">
              </div>
              <!--Body-->
              <div class="modal-body text-center mb-1">

                <h5 class="mt-1 mb-2">Maria Doe</h5>

                <div class="md-form ml-0 mr-0">
                  <input type="password" type="text" id="form29" class="form-control form-control-sm validate ml-0">
                  <label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center mt-4">
                  <button class="btn btn-cyan mt-1">Login <i class="fas fa-sign-in ml-1"></i></button>
                </div>
              </div>

            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: Login with Avatar Form-->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#modalLoginAvatar">Launch
            Modal Login with Avatar</a>
        </div>

      
        
    

Subscription modal with an orange header

Use a subscription modal with a clear header.

        
            

        <div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-warning" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header text-center">
                <h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">
                <div class="md-form mb-5">
                  <i class="fas fa-user prefix grey-text"></i>
                  <input type="text" id="form3" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form3">Your name</label>
                </div>

                <div class="md-form">
                  <i class="fas fa-envelope prefix grey-text"></i>
                  <input type="email" id="form2" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="form2">Your email</label>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Launch
            modal Subscription</a>
        </div>

      
        
    
        
            

        .modal-notify .modal-header {
          border-radius: 3px 3px 0 0;
      }
      .modal-notify .modal-content {
          border-radius: 3px;
      }

      
        
    

Elegant modal login MDB Pro component

The elegant modal login is built according to the concept of material design. Use it to make logging into your website a pleasure.

        
            

        <!-- Modal -->
        <div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content form-elegant">
              <!--Header-->
              <div class="modal-header text-center">
                <h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <!--Body-->
              <div class="modal-body mx-4">
                <!--Body-->
                <div class="md-form mb-5">
                  <input type="email" id="Form-email1" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control validate">
                  <label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
                      Password?</a></p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
                  <!--Twitter-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
                  <!--Google +-->
                  <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
                </div>
              </div>
              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
                    Sign Up</a></p>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Modal -->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#elegantModalForm">Launch
            modal Login Form</a>
        </div>

      
        
    
        
            

        .form-elegant .font-small {
          font-size: 0.8rem; }

      .form-elegant .z-depth-1a {
          -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
          box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

      .form-elegant .z-depth-1-half,
      .form-elegant .btn:hover {
          -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
          box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

      .form-elegant .modal-header {
          border-bottom: none; }

      .modal-dialog .form-elegant .btn .fab {
          color: #2196f3!important; }

      .form-elegant .modal-body, .form-elegant .modal-footer {
          font-weight: 400; }

      
        
    

Dark modal register MDB Pro component

To create a dark modal register use the following code.

        
            

        <!-- Modal -->
        <div class="modal fade" id="darkModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog form-dark" role="document">
            <!--Content-->
            <div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp');">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                <!--Header-->
                <div class="modal-header text-center pb-4">
                  <h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel"><strong>SIGN</strong> <a
                      class="green-text font-weight-bold"><strong> UP</strong></a></h3>
                  <button type="button" class="close white-text" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <!--Body-->
                  <div class="md-form mb-5">
                    <input type="email" id="Form-email5" class="form-control validate white-text">
                    <label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
                  </div>

                  <div class="md-form pb-3">
                    <input type="password" id="Form-pass5" class="form-control validate white-text">
                    <label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
                    <div class="form-group mt-4">
                      <input class="form-check-input" type="checkbox" id="checkbox624">
                      <label for="checkbox624" class="white-text form-check-label">Accept the<a href="#" class="green-text font-weight-bold">
                          Terms and Conditions</a></label>
                    </div>
                  </div>

                  <!--Grid row-->
                  <div class="row d-flex align-items-center mb-4">

                    <!--Grid column-->
                    <div class="text-center mb-3 col-md-12">
                      <button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign up</button>
                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-md-12">
                      <p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#" class="green-text ml-1 font-weight-bold">
                          Log in</a></p>
                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Modal -->

        <div class="text-center">
          <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#darkModalForm">Launch modal
            register Form</a>
        </div>

      
        
    
        
            

        .form-dark .font-small {
          font-size: 0.8rem; }

        .form-dark [type="radio"] + label,
        .form-dark [type="checkbox"] + label {
          font-size: 0.8rem; }

        .form-dark [type="checkbox"] + label:before {
          top: 2px;
          width: 15px;
          height: 15px; }

        .form-dark .md-form label {
          color: #fff; }

        .form-dark input[type=email]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=email]:focus:not([readonly]) + label {
          color: #fff; }

        .form-dark input[type=password]:focus:not([readonly]) {
          border-bottom: 1px solid #00C851;
          -webkit-box-shadow: 0 1px 0 0 #00C851;
          box-shadow: 0 1px 0 0 #00C851; }

        .form-dark input[type=password]:focus:not([readonly]) + label {
          color: #fff; }

        .form-dark input[type="checkbox"] + label:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 17px;
          height: 17px;
          z-index: 0;
          border: 1.5px solid #fff;
          border-radius: 1px;
          margin-top: 2px;
          -webkit-transition: 0.2s;
          transition: 0.2s; }

        .form-dark input[type="checkbox"]:checked + label:before {
          top: -4px;
          left: -3px;
          width: 12px;
          height: 22px;
          border-style: solid;
          border-width: 2px;
          border-color: transparent #00c851 #00c851 transparent;
          -webkit-transform: rotate(40deg);
          -ms-transform: rotate(40deg);
          transform: rotate(40deg);
          -webkit-backface-visibility: hidden;
          -webkit-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%; }

        .form-dark .modal-header {
            border-bottom: none;
        }