Bootstrap modal styles

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

If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .

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


Style

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

It requires 2 simple steps

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

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


These classes will affect following elements:

  1. .modal-header

  2. .badge

  3. .fa-4x - which stands for large icon

Success modal

.modal-notify + .success

Code example:

                                          

  <!-- 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="fa 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="fa fa-diamond ml-1"></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

Code example:

                                          

  <!-- 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="fa 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="fa fa-diamond ml-1"></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

Code example:

                                          

  <!-- 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="fa 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="fa fa-diamond ml-1"></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

Code example:

                                          

  <!-- 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="fa 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="fa fa-diamond ml-1"></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-->