title: Roundtrip tagline: Enhanced Bootstrap Modals description: Enhanced Bootstrap Modals for J1 Template

tags: [ Template, Roundtrip, Bootstrap, Extended, Modal] index: [] categories: [ pages ]

flowtext: false

permalink: /pages/public/start/roundtrip/modals/ regenerate: false

resources: [] resource_options:

- masthead:
    opacity:                          1.0
    slides:
      - url:                          /assets/images/pages/roundtrip/bootstrap-modals.jpg
        alt:                          bootstrap-modals

// Enable the Liquid Preprocessor // —————————————————————————– :page-liquid:

// Set other global page attributes here // —————————————————————————–

// Liquid procedures // —————————————————————————– {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}

// Initialize entry document paths // —————————————————————————– {% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls // —————————————————————————– include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc

// Additional Asciidoc page attributes goes here // —————————————————————————–

// Include sub-documents // —————————————————————————–

lorem:sentences

lorem:sentences

J1 Modals

pass:[<i class=“mdi mdi-book-open mdi-2x mdi-md-indigo”></i>] Refer to: mdbootstrap.com/legacy/4.3.2/?page=javascript/modals[MDB - Enhanced Bootstrap Modals, window=“_blank”].

Enhanced J1 Bootstrap Modals are based on the free package `Bootstrap 4 plugin` based on (legycy) version 4.3.2 provided by mdbootstrap.com/[MDBootstrap.com].

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

pass:[<i class=“mdi mdi-book-open mdi-2x mdi-md-indigo”></i>] Refer to: {bs_doc_components_modal}[Bootstrap Docs, window=“_blank”].

Using J1 enhanced predefined modal styles, some emotional weight is added to the information displaye - 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 mdbootstrap.com/automated-app-start/[Creating Automated web application].

See also: mdbootstrap.com/javascript/modals/[Modal Core Documentation], mdbootstrap.com/javascript/bootstrap-modal-examples/[Modal Forms and Modal Templates].

Position and sizes

lorem:sentences

++++ <div class=“row mb-4”>

<!--First column-->
<div class="col-md-3">
  <h5 class="text-center mb-1">Frame</h5>
  <img src="/"pages/modals/01_frame_modal.jpg" alt="" class="img-fluid z-depth-1">
  <div class="text-center">
    <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Launch</a> <br>
  </div>
</div>
<!--First column-->
<!--Second column-->
<div class="col-md-3">
  <h5 class="text-center mb-1">Side</h5>
  <img src="/"pages/modals/02_site_modal.jpg" alt="" class="img-fluid z-depth-1">
  <div class="text-center">
    <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#sideModalTRSuccessDemo" data-backdrop="false">Launch</a> <br>
  </div>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-md-3">
  <h5 class="text-center mb-1">Central</h5>
  <img src="/"pages/modals/03_central_modal.jpg" alt="" class="img-fluid z-depth-1">
  <div class="text-center">
    <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Launch</a> <br>      
  </div>
</div>
<!--Third column-->
<!--Fourth column-->
<div class="col-md-3">
  <h5 class="text-center mb-1">Fluid</h5>
  <img src="/"pages/modals/04_fluid_modal.jpg" alt="" class="img-fluid z-depth-1">
  <div class="text-center">
    <button type="button" class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">Launch</button> <br>
  </div>
</div>
<!--Fourth column-->

</div> ++++

lorem:sentences

Contact Form

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#modalContactForm">
  Launch Modal Contact Form
</button>

</div> ++++

Top Info

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
  Launch Modal Top Info
</button>

</div> ++++

Bottom Success

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
  Launch Modal Bottom Success
</button>

</div> ++++

Top Right Success

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
  Launch Modal Top Right Success
</button>

</div> ++++

Top Left Info

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
  Launch Modal Top Left Info
</button>

</div> ++++

Bottom Right Danger

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
  Launch Modal Bottom Right Danger
</button>

</div> ++++

Bottom Left Warning

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
  Launch Modal Bottom Left Warning
</button>

</div> ++++

Form Login with Avatar

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#modalLoginAvatarDemo">
  Launch Modal Form Login with Avatar
</button>

</div> ++++

OmniLogin

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#modalOmniLogin">
  Launch Modal OmniLogin
</button>

</div> ++++

++++ <!–Modal OmniLogin –> <div class=“modal fade show” id=“modalOmniLogin” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-notify modal-lg modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Cookie Consent</p>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="px-3">
        <p class="pt-1 pr-2">
          This website uses cookies to ensure you get the best experience on our content,
          presented user-friendly, more effective and safer.
        </p>
      </div>
      <div class="px-3">

        <h6 class="card-subtitle text-muted mt-4 mb-2">Cookie usage</h6><table class="tableblock frame-all grid-all stretch table-responsive mr-2">
          <colgroup>
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 60%;">
          </colgroup>
          <thead>
            <tr>
              <th class="tableblock halign-center valign-top">Session Cookies</th>
              <th class="tableblock halign-center valign-top">Persistent Cookies</th>
              <th class="tableblock halign-center valign-top">First-party Cookies</th>
              <th class="tableblock halign-center valign-top">Second-party Cookies</th>
              <th class="tableblock halign-left valign-top">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="tableblock halign-center valign-top">
                <p class="tableblock"><span class="icon red"><i class="fa fa-check"></i></span></p>
              </td>
              <td class="tableblock halign-center valign-top">
                <p class="tableblock"><span class="icon green"><i class="fa fa-check"></i></span></p>
              </td>
              <td class="tableblock halign-center valign-top">
                <p class="tableblock"><span class="icon green"><i class="fa fa-times"></i></span></p>
              </td>
              <td class="tableblock halign-center valign-top">
                <p class="tableblock"><span class="icon green"><i class="fa fa-times"></i></span></p>
              </td>
              <td class="tableblock halign-left valign-top">
                <div class="content">
                  <div class="paragraph">
                    <p>May used in sections marked by <span class="icon green"><i class="fa fa-check"></i></span></p>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- Footer -->
      <div class="modal-footer justify-content-right mt-5">
        <a type="button" id="cookiePolicy" class="btn btn-secondary-modal mr-2" data-dismiss="modal">
          <i class="mdi mdi-18px mdi-dark mdi-read"></i>
          Cookie Policy
        </a>
        <a type="button" id="acceptButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">
          <i class="mdi mdi-18px mdi-dark mdi-check"></i>
          Yes, I accept cookies
        </a>
        <a type="button" id="declineButton" class="btn btn-outline-modal mr-2" data-dismiss="modal">
          <i class="mdi mdi-18px mdi-dark mdi-close"></i>
          No, I refuse cookies
        </a>
      </div> <!-- END Footer -->
    </div> <!-- END Body -->
  </div> <!-- END Content -->
</div>

</div> <!– END Modal OmniLogin –> <script>

var signIn = {
  provider:   'Github',
  login:      false
};
$('ul.nav-pills > li').click(function (e) {
    e.preventDefault();
    signIn.provider = $(this).text().trim();
    signIn.provider = signIn.provider.toLowerCase();
});
$("button").click(function() {
  if (this.id === "loginButton") {
    signIn.login = true;
  } else {
    signIn.login = false;
  }
});
$("#modalOmniLogin").on('hidden.bs.modal', function() {
  if (signIn.login == true) {
    console.log(signIn.provider, ' : ', signIn.login);
    var provider = signIn.provider.toLowerCase();
    var link = '/auth?provider=' + provider;
    window.location.href = link;
  } else {
    console.log(signIn.provider, ' : ', signIn.login);
  }
});

</script> ++++

Central Large Info

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalLGInfoDemo">
  Launch Modal Central Large Info
</button>

</div> ++++

Central Fluid Success

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalFluidSuccessDemo">
  Launch Modal Central Fluid Success
</button>

</div> ++++

Full Height Right Success

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
  Launch Modal Central Fluid Success
</button>

</div> ++++

Full Height Left Info

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
  Launch Modal Full Height Left Info
</button>

</div> ++++

Full Height Top Warning

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalTopWarningDemo">
  Launch Modal Full Height Top Warning
</button>

</div> ++++

Full Height Bottom Danger

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalBottomDangerDemo">
  Launch Modal Full Height Bottom Danger
</button>

</div> ++++

Central Success

Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.

++++ <div class=“ml-2 mb-5”>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
  Launch Modal Central Success
</button>

</div> ++++

What's next?

lorem:sentences

Check out what the build in {roundtrip-responsive-tables}[Responsive Tables] can do!

++++ <!– Modal Contact Form –> <div class=“modal fade” id=“modalContactForm” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” style=“display: none;”>

<div class="modal-dialog modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Contact Form</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body mb-0">
      <div class="md-form form-sm">
        <i class="mdi mdi-dark mdi-email"></i>
        <input type="text" id="form19" class="form-control">
        <label for="form19">Your name</label>
      </div>
      <div class="md-form form-sm">
        <i class="mdi mdi-dark mdi-lock"></i>
        <input type="password" id="form20" class="form-control">
        <label for="form20">Your email</label>
      </div>
      <div class="md-form form-sm">
        <i class="mdi mdi-dark mdi-tag"></i>
        <input type="text" id="form21" class="form-control">
        <label for="form21">Subject</label>
      </div>
      <div class="md-form form-sm">
        <i class="mdi mdi-dark mdi-pencil"></i>
        <textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
        <label for="form8">Your message</label>
      </div>
      <!-- Footer -->
      <div class="modal-footer mt-5">
        <a type="button" class="btn btn-primary-modal btn-text">Send<i class="mdi mdi-dark mdi-send ml-1"></i></a>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Contact Form –>

<!– Modal Full Height Right Success–> <div class=“modal fade right” id=“fluidModalRightSuccess” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>

<div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <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>
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
      </div>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Full Height Modal Right Success –>

<!– Modal Top Info –> <div class=“modal fade top” id=“frameModalTopInfoDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!-- Body -->
    <div class="modal-body">
      <div class="row px-4">
        <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
      </div>
      <div class="row px-4">
        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Top Info –>

<!– Modal Bottom Success–> <div class=“modal fade bottom” id=“frameModalBottomSuccessDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!-- Body -->
    <div class="modal-body">
      <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">          
        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Bottom Success –>

<!– Side Modal Top Right Success –> <div class=“modal fade right” id=“sideModalTRSuccessDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Top Right Success –>

<!– Side Modal Top Left Info –> <div class=“modal fade left” id=“sideModalTLInfoDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Info</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <img src="/assets/images/master_header/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
      <div class="text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Top Left Info –>

<!– Side Modal Bottom Right Danger –> <div class=“modal fade right” id=“sideModalBRDangerDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Danger</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3">
          <p></p>
          <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <h2 class="notoc"><span class="badge">v52gs1</span></h2>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Bottom Right Danger –>

<!– Side Modal Bottom Left Warning –> <div class=“modal fade left” id=“sideModalBLWarningDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Warning</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
          <div style="height: 10px"></div>
          <p class="title mb-0">Jane</p>
          <p class="text-muted " style="font-size: 13px">Consultant</p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Side Modal Bottom Left Warning –>

<!– Modal Form Login with Avatar Demo –> <div class=“modal fade” id=“modalLoginAvatarDemo” 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.jpg" class="rounded-circle img-responsive">
    </div>
    <!-- Body -->
    <div class="modal-body text-center mb-1">
      <h5 class="mt-1 mb-2 notoc">Maria Doe</h5>
      <div class="md-form ml-0 mr-0">
        <input type="password" type="text" id="form1" class="form-control ml-0">
        <label for="form1" class="ml-0">Enter password</label>
      </div>
      <div class="text-center">
        <button class="btn btn-cyan mt-1">Login <i class="mdi mdi-login ml-1"></i></button>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!–END Modal Form Login with Avatar Demo –>

<!–Modal Login-Register Form Demo –> <div class=“modal fade” id=“modalLRFormDemo” 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 tabs-2 light-blue darken-3" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#panel17" role="tab"><i class="mdi mdi-account mr-1"></i> Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#panel18" role="tab"><i class="mdi mdi-account-plus mr-1"></i> Register</a>
        </li>
      </ul>
      <!-- Tab panels -->
      <div class="tab-content">
        <!--Panel 17-->
        <div class="tab-pane fade in show active" id="panel17" role="tabpanel">
          <!-- Body -->
          <div class="modal-body mb-1">
            <div class="md-form form-sm">
              <i class="mdi mdi-email"></i>
              <input type="text" id="form2" class="form-control">
              <label for="form2">Your email</label>
            </div>
            <div class="md-form form-sm">
              <i class="mdi mdi-lock"></i>
              <input type="password" id="form3" class="form-control">
              <label for="form3">Your password</label>
            </div>
            <div class="text-center mt-2">
              <button class="btn btn-info">Log in <i class="mdi mdi-login 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 ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
          </div>
        </div>
        <!--/.Panel 7-->
        <!--Panel 18-->
        <div class="tab-pane fade" id="panel18" role="tabpanel">
          <!-- Body -->
          <div class="modal-body">
            <div class="md-form form-sm">
              <i class="mdi mdi-email"></i>
              <input type="text" id="form14" class="form-control">
              <label for="form14">Your email</label>
            </div>
            <div class="md-form form-sm">
              <i class="mdi mdi-lock"></i>
              <input type="password" id="form5" class="form-control">
              <label for="form5">Your password</label>
            </div>
            <div class="md-form form-sm">
              <i class="mdi mdi-lock"></i>
              <input type="password" id="form6" class="form-control">
              <label for="form6">Repeat password</label>
            </div>
            <div class="text-center form-sm mt-2">
              <button class="btn btn-info">Sign up <i class="mdi mdi-login ml-1"></i></button>
            </div>
            <fieldset class="additional-option">
              <input type="checkbox" id="checkbox1">
              <label for="checkbox1">Subscribe me to the newsletter</label>
            </fieldset>
          </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 ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
          </div>
        </div>
        <!--/.Panel 8-->
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Login-Register Form Demo –>

<!– Modal Central Large Info –> <div class=“modal fade” id=“centralModalLGInfoDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>

<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Info</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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>
      <img src="/assets/images/master_header/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Central Large Info –>

<!– Modal Central Fluid Success –> <div class=“modal fade” id=“centralModalFluidSuccessDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>

<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Central Fluid Success –>

<!– Modal Full Height Right Success Demo –> <div class=“modal fade right” id=“fluidModalRightSuccessDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Right Success Demo –>

<!– Modal Full Height Left Info Demo –> <div class=“modal fade left” id=“fluidModalLeftInfoDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Left Info Demo –>

<!– Modal Full Height Top Warning Demo –> <div class=“modal fade top” id=“fluidModalTopWarningDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-full-height modal-top modal-notify modal-warning" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Warning</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
      </div>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Top Warning Demo –>

<!– Modal Full Height Bottom Danger Demo –> <div class=“modal fade bottom” id=“fluidModalBottomDangerDemo” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-full-height modal-bottom modal-notify modal-danger" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Modal Danger</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
      </div>
      <ul class="list-group z-depth-0">
        <li class="list-group-item justify-content-between">
          Cras justo odio
          <span class="badge badge-primary badge-pill">14</span>
        </li>
        <li class="list-group-item justify-content-between">
          Dapibus ac facilisis in
          <span class="badge badge-primary badge-pill">2</span>
        </li>
        <li class="list-group-item justify-content-between">
          Morbi leo risus
          <span class="badge badge-primary badge-pill">1</span>
        </li>
      </ul>
    </div>
    <!-- Footer -->
    <div class="modal-footer">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Full Height Bottom Danger Demo –>

<!– Modal Central Success Demo –> <div class=“modal fade” id=“centralModalSuccessDemo” 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="lead">Modal Success</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="text-center">
        <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></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-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Central Success Demo –>

<!– Modal Central Info Demo –> <div class=“modal fade” id=“centralModalInfoDemo” 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="lead">Modal Info</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <img src="/assets/images/master_header/admin-dashboard-bootstrap-1280x600.png" alt="" class="img-fluid">
      <div class="text-center">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Central Info Demo –>

<!– Modal Central Danger Demo –> <div class=“modal fade” id=“centralModalDangerDemo” 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="lead">Modal Danger</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3">
          <p></p>
          <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <h2 class="notoc"><span class="badge">v52gs1</span></h2>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Central Danger Demo –>

<!– Modal Central Warning Demo –> <div class=“modal fade” id=“centralModalWarningDemo” 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="lead">Modal Warning</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
          <div style="height: 10px"></div>
          <p class="title mb-0">Jane</p>
          <p class="text-muted " style="font-size: 13px">Consultant</p>
        </div>
        <div class="col-9">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
          <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal Central Warning Demo –>

<!–Modal New User –> <div class=“modal fade right” id=“modalBFDemoNewUser” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Welcome to MDBootstrap!</p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true" class="white-text">×</span>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="https://mdbootstrap.com/img/Others/Modals/michal.jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
          <div style="height: 10px"></div>
          <p class="title mb-0">Michal</p>
          <p class="text-muted " style="font-size: 13px">MDB Founder</p>
        </div>
        <div class="col-9">
          <p><strong>Hey there!</strong></p>
          <p>We're happy to see that you're getting involved.</p>
          <p>How about <strong>we help you in getting more</strong> out of all this awesomeness?</p>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary-modal">Start tutorial <i class="mdi mdi-code-tags ml-1"></i></a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!– END Modal New User –>

<!–Modal 10% Discount –> <div class=“modal fade right” id=“modalBFDemoDiscount” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true” data-backdrop=“false”>

<div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header">
      <p class="lead">Discount offer: <strong>10% off</strong></p>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="mdi mdi-close mdi-dark mdi-48px"></i>
      </button>
    </div>
    <!-- Body -->
    <div class="modal-body">
      <div class="row">
        <div class="col-3">
          <p></p>
          <p class="text-center"><i class="mdi mdi-gift mdi-4x"></i></p>
        </div>
        <div class="col-9">
          <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.</p>
          <p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
          <h2 class="notoc"><span class="badge">v52gs1</span></h2>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="modal-footer justify-content-center">
      <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Yes, please</a>
      <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!–END Modal 10% Discount –>

<!–Modal Subscription –> <div class=“modal fade” id=“modalBFDemoSubscription” tabindex=“-1” role=“dialog” aria-labelledby=“myModalLabel” aria-hidden=“true”>

<div class="modal-dialog cascading-modal z-depth-1" role="document">
  <!-- Content -->
  <div class="modal-content">
    <!--Header-->
    <div class="modal-header light-blue darken-3 white-text">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
      </button>
      <h4 class="title notoc"><i class="mdi mdi-newspaper"></i> Don’t miss important updates</h4>
    </div>
    <!-- Body -->
    <div class="modal-body mb-0">
      <p class="lead text-center">Subscribe to our newsletter</p>
      <div class="md-form form-sm">
        <i class="mdi mdi-lock"></i>
        <input type="password" id="form16" class="form-control">
        <label for="form16">Your name</label>
      </div>
      <div class="md-form form-sm">
        <i class="mdi mdi-email"></i>
        <input type="text" id="form17" class="form-control">
        <label for="form17">Your email</label>
      </div>
      <div class="text-center mt-1-half">
        <button class="btn btn-info">Submit <i class="mdi mdi-check ml-1"></i></button>
        <button class="btn btn-outline-info" data-dismiss="modal">No, thanks</button>
      </div>
    </div>
  </div>
  <!-- END Content -->
</div>

</div> <!–END Modal Subscription –> ++++