Modal styles

Bootstrap modal styles

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

By using our predefined modal styles you can add some emotional weight to your information, ranging from a simple warning to a critical system failure, or from an operation success to a piece of neutral information.

If you want to learn about the advanced usage of Modals, read our free tutorial Creating an Automated Web Application.

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

Launch Modal Success

Launch Modal Info

Launch Modal Danger

Launch Modal Warning

Basic usage - styles

It requires two simple steps

Step 1: Add the class .modal-notify to the .modal-dialog div.

Step 2: Add the class .success, .info, .danger or .warning to the .modal-dialog div.

These classes will affect the following elements:

.modal-header
.badge
.fa-4x - which stands for a large icon

Success modal

.modal-notify + .success

Show code Edit in sandbox

HTML

        
            

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalSuccess">Launch
          modal
       </button>

        <!-- Central Modal Medium Success -->
        <div class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-success" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Modal Success</p>

                <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="text-center">
                  <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
                    ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
                    ab officiis totam.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-success">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Success-->

Info modal

.modal-notify + .info

Show code Edit in sandbox

HTML

        
            

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalInfo">Launch
          modal
       </button>

        <!-- Central Modal Medium Info -->
        <div class="modal fade" id="centralModalInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Modal Info</p>

                <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="text-center">
                  <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
                    ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
                    ab officiis totam.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Info-->

Danger modal

.modal-notify + .danger

Show code Edit in sandbox

HTML

        
            

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalDanger">Launch
          modal
       </button>

        <!-- Central Modal Medium Danger -->
        <div class="modal fade" id="centralModalDanger" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Modal Danger</p>

                <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="text-center">
                  <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
                    ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
                    ab officiis totam.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-danger">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Danger-->

Warning modal

.modal-notify + .warning

Show code Edit in sandbox

HTML

        
            

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalWarning">Launch
          modal
       </button>

        <!-- Central Modal Medium Warning -->
        <div class="modal fade" id="centralModalWarning" 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">
                <p class="heading lead">Modal Warning</p>

                <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="text-center">
                  <i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
                    ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
                    ab officiis totam.</p>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-warning">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
                <a type="button" class="btn btn-outline-warning waves-effect" data-dismiss="modal">No, thanks</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Central Modal Medium Warning-->

Introduction
Basic usage - styles

Modal styles

Bootstrap modal styles

v52gs1

Basic usage - styles

Success modal

Info modal

Danger modal

Warning modal