Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  
  <div class="text-center darken-grey-text mb-4">
                <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>
                <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a>
            </div>
  
      <!--Section: Additional Modals-->
    <section>

        <!-- Frame 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 d-flex justify-content-center align-items-center">

                            <p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit
                                nostrum quos..</p>

                            <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                        </div>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Frame Modal Bottom Success-->

        <!-- Frame 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">
                        <div class="row d-flex justify-content-center align-items-center">

                            <p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit
                                nostrum quos..</p>

                            <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                            <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                        </div>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Frame 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="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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- 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="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">

                        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" 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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- 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="heading">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="row">
                            <div class="col-3">
                                <p></p>
                                <p class="text-center"><i class="fa fa-shopping-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><span class="badge">v52gs1</span></h2>
                            </div>
                        </div>
                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- 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="heading">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="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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- 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" alt="Avatar photo">
                    </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="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="fa fa-sign-in ml-1"></i></button>
                        </div>
                    </div>

                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--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="fa fa-user mr-1"></i> Login</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#panel18" role="tab"><i class="fa fa-user-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="fa fa-envelope prefix"></i>
                                        <input type="text" id="form2" class="form-control">
                                        <label for="form2">Your email</label>
                                    </div>

                                    <div class="md-form form-sm">
                                        <i class="fa fa-lock prefix"></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="fa 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 18-->
                            <div class="tab-pane fade" id="panel18" role="tabpanel">

                                <!--Body-->
                                <div class="modal-body">
                                    <div class="md-form form-sm">
                                        <i class="fa fa-envelope prefix"></i>
                                        <input type="text" id="form14" class="form-control">
                                        <label for="form14">Your email</label>
                                    </div>

                                    <div class="md-form form-sm">
                                        <i class="fa fa-lock prefix"></i>
                                        <input type="password" id="form5" class="form-control">
                                        <label for="form5">Your password</label>
                                    </div>

                                    <div class="md-form form-sm">
                                        <i class="fa fa-lock prefix"></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="fa 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 Demo-->

        <!-- Central Modal 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="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>
                        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" class="img-fluid">

                    </div>

                    <!--Footer-->
                    <div class="modal-footer">
                        <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal Large Info-->

        <!-- Central Modal 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="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>
                        <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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal Fluid Success-->

        <!-- Full Height Modal 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="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>
                        <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 justify-content-center">
                        <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Full Height Modal Right Success Demo-->

        <!-- Full Height Modal 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="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>
                        <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 justify-content-center">
                        <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Full Height Modal Right Info Demo-->

        <!-- Full Height Modal 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="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>
                        </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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Full Height Modal Top Warning Demo-->

        <!-- Full Height Modal 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="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>
                        </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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Full Height Modal Bottom Danger Demo-->

        <!-- Central Modal 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="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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal Success Demo-->

        <!-- Central Modal 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="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">

                        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" 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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal Info Demo-->

        <!-- Central Modal 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="heading">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="row">
                            <div class="col-3">
                                <p></p>
                                <p class="text-center"><i class="fa fa-shopping-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><span class="badge">v52gs1</span></h2>
                            </div>
                        </div>
                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal Danger Demo-->

        <!-- Central Modal 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="heading">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="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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Central Modal 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="heading">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="fa fa-code ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--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="heading">Discount offer: <strong>10% off</strong></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="row">
                            <div class="col-3">
                                <p></p>
                                <p class="text-center"><i class="fa fa-gift fa-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><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">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--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">
                        <h4 class="title"><i class="fa fa-newspaper-o"></i> Don’t miss important updates</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                    </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="fa fa-lock prefix"></i>
                            <input type="password" id="form16" class="form-control">
                            <label for="form16">Your name</label>
                        </div>

                        <div class="md-form form-sm">
                            <i class="fa fa-envelope prefix"></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="fa fa-check ml-1"></i></button>
                            <button class="btn btn-outline-info waves-effect" data-dismiss="modal">No, thanks</button>
                        </div>

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

    </section>
    <!--Section: Additional Modals-->

    <!--Section: Predefined templates modals-->
    <section>

        <!--Modal: modalCookie-->
        <div class="modal fade top" id="modalCookie" 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 d-flex justify-content-center align-items-center">

                            <p class="pt-3 pr-2">We use cookies to improve your website experience</p>

                            <a role="button" class="btn btn-primary-modal">Learn more <i class="fa fa-book ml-1"></i></a>
                            <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Ok, thanks</a>
                        </div>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--Modal: modalCookie-->

        <!--Modal: modalCoupon-->
        <div class="modal fade top" id="modalCoupon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
            data-backdrop="false">
            <div class="modal-dialog modal-frame modal-top modal-notify modal-success" role="document">
                <!--Content-->
                <div class="modal-content">
                    <!--Body-->
                    <div class="modal-body">
                        <div class="row d-flex justify-content-center align-items-center">

                            <h2><span class="badge">v52gs1</span></h2>
                            <p class="pt-3 mx-4">We have a gift for you! Use this code to get a <strong>10% discount</strong>.</p>

                            <a role="button" class="btn btn-primary-modal">Get it <i class="fa fa-book ml-1"></i></a>
                            <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                        </div>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--Modal: modalCoupon-->

        <!--Modal: modalDiscount-->
        <div class="modal fade right" id="modalDiscount" 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="heading">Discount offer: <strong>10% off</strong></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="row">
                            <div class="col-3">
                                <p></p>
                                <p class="text-center"><i class="fa fa-gift fa-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><span class="badge">v52gs1</span></h2>

                            </div>
                        </div>
                    </div>

                    <!--Footer-->
                    <div class="modal-footer flex-center">
                        <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--Modal: modalDiscount-->

        <!--Modal: modalRelatedContent-->
        <div class="modal fade right" id="modalRelatedContent" 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="heading">Related article</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="row">
                            <div class="col-5">
                                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg" class="img-fluid" alt="Material Design for Bootstrap - example photo">
                            </div>

                            <div class="col-7">
                                <p><strong>My travel to paradise</strong></p>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
                                <button type="button" class="btn btn-primary btn-md">Read more</button>

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

        <!-- Modal: modalAbandonedCart-->
        <div class="modal fade right" id="modalAbandonedCart" 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="heading">Product in the cart
                        </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="row">
                            <div class="col-3">
                                <p></p>
                                <p class="text-center"><i class="fa fa-shopping-cart fa-4x"></i></p>
                            </div>

                            <div class="col-9">
                                <p>Do you need more time to make a purchase decision?</p>
                                <p>No pressure, your product will be waiting for you in the cart.</p>
                            </div>
                        </div>
                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <a role="button" class="btn btn-primary-modal">Go to cart</a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Cancel</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!-- Modal: modalAbandonedCart-->

        <!--Modal: modalConfirmDelete-->
        <div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
                <!--Content-->
                <div class="modal-content text-center">
                    <!--Header-->
                    <div class="modal-header d-flex justify-content-center">
                        <p class="heading">Are you sure?</p>
                    </div>

                    <!--Body-->
                    <div class="modal-body">

                        <i class="fa fa-times fa-4x animated rotateIn"></i>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer flex-center">
                        <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn  btn-outline-secondary-modal">Yes</a>
                        <a role="button" class="btn  btn-primary-modal waves-effect" data-dismiss="modal">No</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--Modal: modalConfirmDelete-->

        <!-- Modal: modalPoll -->
        <div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
            data-backdrop="false">
            <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <p class="heading lead">Feedback request
                        </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="text-center">
                            <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
                            <p><strong>Your opinion matters</strong></p>
                            <p>Have some ideas how to improve our product? <strong></strong>Give us your feedback.</strong>
                            </p>
                        </div>

                        <hr>

                        <!-- Radio -->
                        <p class="text-center"><strong>Your rating</strong></p>
                        <div class="form-group">
                            <input name="group1" type="radio" id="radio-1">
                            <label for="radio-1">Very good</label>
                        </div>

                        <div class="form-group">
                            <input name="group1" type="radio" id="radio-2">
                            <label for="radio-2">Good</label>
                        </div>

                        <div class="form-group">
                            <input name="group1" type="radio" id="radio-3">
                            <label for="radio-3">Mediocre</label>
                        </div>
                        <div class="form-group">
                            <input name="group1" type="radio" id="radio-4">
                            <label for="radio-4">Bad</label>
                        </div>
                        <div class="form-group">
                            <input name="group1" type="radio" id="radio-4">
                            <label for="radio-4">Very bad</label>
                        </div>
                        <!-- Radio -->

                        <p class="text-center"><strong>What could we improve?</strong></p>
                        <!--Basic textarea-->
                        <div class="md-form">
                            <textarea type="text" id="form7" class="md-textarea"></textarea>
                            <label for="form7">Your message</label>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <a role="button" class="btn btn-primary-modal waves-effect waves-light">Send <i class="fa fa-paper-plane ml-1"></i></a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal: modalPoll -->

        <!-- Modal: modalCart -->
        <div class="modal fade" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!--Header-->
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Your cart</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                    </div>
                    <!--Body-->
                    <div class="modal-body">

                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Product name</th>
                                    <th>Price</th>
                                    <th>Remove</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Product 1</td>
                                    <td>100$</td>
                                    <td><a><i class="fa fa-remove"></i></a></td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Product 2</td>
                                    <td>100$</td>
                                    <td><a><i class="fa fa-remove"></i></a></td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Product 3</td>
                                    <td>100$</td>
                                    <td><a><i class="fa fa-remove"></i></a></td>
                                </tr>
                                <tr>
                                    <th scope="row">4</th>
                                    <td>Product 4</td>
                                    <td>100$</td>
                                    <td><a><i class="fa fa-remove"></i></a></td>
                                </tr>
                                <tr class="total">
                                    <th scope="row">5</th>
                                    <td>Total</td>
                                    <td>400$</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary">Checkout</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal: modalCart -->

        <!--Modal: modalPush-->
        <div class="modal fade" id="modalPush" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-notify modal-info" role="document">
                <!--Content-->
                <div class="modal-content text-center">
                    <!--Header-->
                    <div class="modal-header d-flex justify-content-center">
                        <p class="heading">Be always up to date</p>
                    </div>

                    <!--Body-->
                    <div class="modal-body">

                        <i class="fa fa-bell fa-4x animated rotateIn mb-4"></i>

                        <p>Do you want to receive the push notification about the newest posts?</p>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer flex-center">
                        <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal ">Yes</a>
                        <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No</a>
                    </div>
                </div>
                <!--/.Content-->
            </div>
        </div>
        <!--Modal: modalPush-->

        <!--Modal: modalYT-->
        <div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a role="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a role="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a role="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a role="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

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

            </div>
        </div>
        <!--Modal: modalYT-->

        <!--Modal: modalVM-->
        <div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Body-->
                    <div class="modal-body mb-0 p-0">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                            <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447" allowfullscreen></iframe>
                        </div>

                    </div>

                    <!--Footer-->
                    <div class="modal-footer justify-content-center">
                        <span class="mr-4">Spread the word!</span>
                        <a role="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a role="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a role="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a role="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>

                        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                    </div>

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

            </div>
        </div>
        <!--Modal: modalVM-->

        <!-- Modal: modalQuickView -->
        <div class="modal fade" id="modalQuickView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-5">
                                <!--Carousel Wrapper-->
                                <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">

                                    <!--Slides-->
                                    <div class="carousel-inner" role="listbox">
                                        <div class="carousel-item active">
                                            <img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).jpg" alt="First slide">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).jpg" alt="Second slide">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).jpg" alt="Third slide">
                                        </div>
                                    </div>
                                    <!--/.Slides-->

                                    <!--Thumbnails-->
                                    <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Previous</span>
                                                        </a>
                                    <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="sr-only">Next</span>
                                                        </a>
                                    <!--/.Thumbnails-->

                                </div>
                                <!--/.Carousel Wrapper-->
                            </div>
                            <div class="col-lg-7">
                                <h2 class="h2-responsive product-name"><strong>Product Name</strong></h2>
                                <h4 class="h4-responsive"><span class="green-text"><strong>$49</strong></span> <span class="grey-text"><small><s>$89</s></small></span></h4>

                                <!--Accordion wrapper-->
                                <div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
                                    <div class="card">
                                        <div class="card-header" role="tab" id="headingOne">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <h5 class="mb-0">
                                                    Description <i class="fa fa-angle-down rotate-icon"></i>
                                                </h5>
                                            </a>
                                        </div>
                                        <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                                            <div class="card-body">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
                                                maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
                                                necessitatibus.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-header" role="tab" id="headingTwo">
                                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                <h5 class="mb-0">
                                                    Details <i class="fa fa-angle-down rotate-icon"></i>
                                                </h5>
                                            </a>
                                        </div>
                                        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                                            <div class="card-body">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
                                                maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
                                                necessitatibus.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-header" role="tab" id="headingThree">
                                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                <h5 class="mb-0">
                                                    Shipping <i class="fa fa-angle-down rotate-icon"></i>
                                                </h5>
                                            </a>
                                        </div>
                                        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
                                            <div class="card-body">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nesciunt atque nemo neque ut officiis nostrum incidunt
                                                maiores, magni optio et sunt suscipit iusto nisi totam quis, nobis mollitia
                                                necessitatibus.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--/.Accordion wrapper-->

                                <!-- Add to Cart -->
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="md-form">
                                                <select class="mdb-select colorful-select dropdown-primary">
                                                                        <option value="" disabled selected>Choose your option</option>
                                                                        <option value="1">White</option>
                                                                        <option value="2">Black</option>
                                                                        <option value="3">Pink</option>
                                                                    </select>
                                                <label>Select color</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="md-form">
                                                <select class="mdb-select colorful-select dropdown-primary">
                                                                        <option value="" disabled selected>Choose your option</option>
                                                                        <option value="1">XS</option>
                                                                        <option value="2">S</option>
                                                                        <option value="3">L</option>
                                                                    </select>
                                                <label>Select size</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center">

                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button class="btn btn-primary">Add to cart<i class="fa fa-cart-plus ml-2" aria-hidden="true"></i></button>
                                    </div>
                                </div>
                                <!-- /.Add to Cart -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal: modalQuickView -->

        <!--Modal: modalSocial-->
        <div class="modal fade" id="modalSocial" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog cascading-modal" role="document">

                <!--Content-->
                <div class="modal-content">

                    <!--Header-->
                    <div class="modal-header light-blue darken-3 white-text">
                        <h4 class="title"><i class="fa fa-users"></i> Spreed the word!</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>

                    <!--Body-->
                    <div class="modal-body mb-0 text-center">


                        <!--Facebook-->
                        <a role="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a role="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google +-->
                        <a role="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
                        <!--Linkedin-->
                        <a role="button" class="btn-floating btn-li"><i class="fa fa-linkedin"></i></a>
                        <!--Instagram-->
                        <a role="button" class="btn-floating btn-ins"><i class="fa fa-instagram"></i></a>
                        <!--Pinterest-->
                        <a role="button" class="btn-floating btn-pin"><i class="fa fa-pinterest"></i></a>
                        <!--Youtube-->
                        <a role="button" class="btn-floating btn-yt"><i class="fa fa-youtube"></i></a>
                        <!--Dribbble-->
                        <a role="button" class="btn-floating btn-dribbble"><i class="fa fa-dribbble"></i></a>
                        <!--Vkontakte-->
                        <a role="button" class="btn-floating btn-vk"><i class="fa fa-vk"></i></a>
                        <!--Stack Overflow-->
                        <a role="button" class="btn-floating btn-so"><i class="fa fa-stack-overflow"></i></a>
                        <!--Slack-->
                        <a role="button" class="btn-floating btn-slack"><i class="fa fa-slack"></i></a>
                        <!--Github-->
                        <a role="button" class="btn-floating btn-git"><i class="fa fa-github"></i></a>
                        <!--Comments-->
                        <a role="button" class="btn-floating btn-comm"><i class="fa fa-comments"></i></a>
                        <!--Email-->
                        <a role="button" class="btn-floating btn-email"><i class="fa fa-envelope"></i></a>


                    </div>

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

            </div>
        </div>
        <!--Modal: modalSocial-->

    </section>
    <!--Section: Predefined templates modals-->

    <!-- SECTION: Demo-->
    <section id="liveDemo">

        <!--Section: Position & Sizes-->
        <section>
            <h2 class="doc-title mt-0">Position & Sizes</h2>

            <div class="text-center mb-5">
                <p class="lead">Click buttons below to launch modals demo</p>
            </div>

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

                <!--First column-->
                <div class="col-md-3">
                    <h5 class="text-center mb-3">Frame Modal</h5>

                    <img src="https://mdbootstrap.com/img/brandflow/modal4.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
                    <div class="text-center">
                        <h5 class="my-3">Position</h5>

                        <a class="btn btn-primary" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Top</a>                        <br>
                        <a class="btn btn-primary mb-3" data-toggle="modal" data-target="#frameModalBottomSuccessDemo" data-backdrop="false">Bottom</a>
                    </div>
                </div>
                <!--First column-->

                <!--Second column-->
                <div class="col-md-3">
                    <h5 class="text-center mb-3">Side Modal</h5>

                    <img src="https://mdbootstrap.com/img/brandflow/modal3.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
                    <div class="text-center">
                        <h5 class="my-3">Position</h5>

                        <a class="btn btn-primary" data-toggle="modal" data-target="#sideModalTRSuccessDemo" data-backdrop="false">Top Right</a>                        <br>
                        <a class="btn btn-primary" data-toggle="modal" data-target="#sideModalTLInfoDemo">Top Left</a> <br>
                        <a class="btn btn-primary" data-toggle="modal" data-target="#sideModalBRDangerDemo">Bottom Right</a>                        <br>
                        <a class="btn btn-primary mb-3" data-toggle="modal" data-target="#sideModalBLWarningDemo">Bottom Left</a>
                    </div>
                </div>
                <!--Second column-->

                <!--Third column-->
                <div class="col-md-3">
                    <h5 class="text-center mb-3">Central Modal</h5>

                    <img src="https://mdbootstrap.com/img/brandflow/modal2.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
                    <div class="text-center">
                        <h5 class="my-3">Size</h5>

                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginAvatarDemo">Small </button>                        <br>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLRFormDemo">Medium </button>                        <br>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#centralModalLGInfoDemo">Large </button>                        <br>
                        <button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#centralModalFluidSuccessDemo">Fluid </button>
                    </div>
                </div>
                <!--Third column-->

                <!--Fourth column-->
                <div class="col-md-3">
                    <h5 class="text-center mb-3">Fluid Modal</h5>

                    <img src="https://mdbootstrap.com/img/brandflow/modal1.jpg" alt="MDB graphics" class="img-fluid z-depth-1">
                    <div class="text-center">
                        <h5 class="my-3">Position</h5>

                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">Right</button>                        <br>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">Left</button>                        <br>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalTopWarningDemo">Top</button>                        <br>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fluidModalBottomDangerDemo">Bottom</button>
                    </div>
                </div>
                <!--Fourth column-->

            </div>
            <!-- /.First row-->

        </section>
        <!--/Section: Position & Sizes-->

        <!--Section: Styles-->
        <section>
            <h2 class="doc-title mt-3">Styles examples</h2>

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

                <!--First column-->
                <div class="col-md-6">

                    <div class="text-center">
                        <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalSuccessDemo">Launch Modal Success <i class="fa fa-eye ml-1"></i></a>
                    </div>

                    <!--Modal: mdb-abandonedCart-hard-->
                    <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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                                <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                            </div>
                        </div>
                        <!--/.Content-->
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6">

                    <div class="text-center">
                        <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalInfoDemo">Launch Modal Info <i class="fa fa-eye ml-1"></i></a>
                    </div>

                    <!--Modal: mdb-abandonedCart-hard-->
                    <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">

                                <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="Material Design for Bootstrap - dashboard" 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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                                <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                            </div>
                        </div>
                        <!--/.Content-->
                    </div>
                    <!--/Modal: mdb-abandonedCart-hard-->
                </div>
                <!--/Second column-->
            </div>
            <!--/First row-->

            <!--Second row-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">

                    <div class="text-center">
                        <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalDangerDemo">Launch Modal Danger <i class="fa fa-eye ml-1"></i></a>
                    </div>

                    <!--Modal: mdb-abandonedCart-hard-->
                    <div class="modal-dialog modal-notify modal-danger" role="document">
                        <!--Content-->
                        <div class="modal-content">
                            <!--Header-->
                            <div class="modal-header">
                                <p class="heading">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="row">
                                    <div class="col-3">
                                        <p></p>
                                        <p class="text-center"><i class="fa fa-shopping-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><span class="badge">v52gs1</span></h2>
                                    </div>
                                </div>
                            </div>

                            <!--Footer-->
                            <div class="modal-footer justify-content-center">
                                <a role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                                <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                            </div>
                        </div>
                        <!--/.Content-->
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-6">

                    <div class="text-center">
                        <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#centralModalWarningDemo">Launch Modal Warning <i class="fa fa-eye ml-1"></i></a>
                    </div>

                    <!--Modal: mdb-abandonedCart-hard-->
                    <div class="modal-dialog modal-notify modal-warning" role="document">
                        <!--Content-->
                        <div class="modal-content">
                            <!--Header-->
                            <div class="modal-header">
                                <p class="heading">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="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 role="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
                                <a role="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
                            </div>
                        </div>
                        <!--/.Content-->
                    </div>
                </div>
                <!--/Second column-->
            </div>
            <!--/Second row-->

        </section>
        <!--Section: Styles-->

        <!--Section: Forms-->
        <section>
            <h2 class="doc-title">Forms Examples</h2>

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

                <!--First column-->
                <div class="col-md-6">

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

                    <!--Modal: Contact form-->
                    <div class="modal-dialog cascading-modal" role="document">
                        <!--Content-->
                        <div class="modal-content">

                            <!--Header-->
                            <div class="modal-header light-blue darken-3 white-text">
                                <h4 class="title"><i class="fa fa-pencil"></i> Contact form</h4>
                                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                            </div>
                            <!--Body-->
                            <div class="modal-body mb-0">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input type="text" id="form8" class="form-control">
                                    <label for="form8">Your name</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-lock prefix"></i>
                                    <input type="password" id="form9" class="form-control">
                                    <label for="form9">Your email</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-tag prefix"></i>
                                    <input type="text" id="form10" class="form-control">
                                    <label for="form10">Subject</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-pencil prefix"></i>
                                    <textarea type="text" id="form8" class="md-textarea mb-0"></textarea>
                                    <label for="form8">Your message</label>
                                </div>

                                <div class="text-center mt-1-half">
                                    <button class="btn btn-info mb-2">Send <i class="fa fa-send ml-1"></i></button>
                                </div>

                            </div>
                        </div>
                        <!--/.Content-->
                    </div>
                    <!--/Modal: Contact form-->

                </div>
                <!--/First column-->

                <!--First column-->
                <div class="col-md-6">

                    <div class="text-center">
                        <a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscription">Launch Modal Subscription Form <i class="fa fa-eye ml-1"></i></a>
                    </div>

                    <!--Modal: Subscription-->
                    <div class="modal-dialog cascading-modal" role="document">
                        <!--Content-->
                        <div class="modal-content">

                            <!--Header-->
                            <div class="modal-header light-blue darken-3 white-text">
                                <h4 class="title"><i class="fa fa-newspaper-o"></i> Subscription form</h4>
                                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                            </div>
                            <!--Body-->
                            <div class="modal-body mb-0">

                                <div class="md-form form-sm">
                                    <i class="fa fa-lock prefix"></i>
                                    <input type="password" id="form16" class="form-control">
                                    <label for="form16">Your name</label>
                                </div>

                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></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 mb-1">Submit <i class="fa fa-check ml-1"></i></button>
                                </div>

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

                </div>
                <!--/First column-->
            </div>
            <!--/First row-->

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

                <!--Second column-->
                <div class="col-md-12">

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

                    <!--Modal: Avatar-->
                    <div class="modal-dialog modal-sm cascading-modal modal-avatar" 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" alt="Avator photo">
                            </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="form18" class="form-control ml-0">
                                    <label for="form18" class="ml-0">Enter password</label>
                                </div>

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

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

                </div>
                <!--/Second column-->
            </div>
            <!--/Second row-->

            <p class="text-center font-weight-bold mt-5">More modal form templates you can find in <a href="https://mdbootstrap.com/javascript/bootstrap-modal-form/">Modal Forms documentation</a>.</p>

        </section>
        <!--Section: Forms-->

        <!--Section: Predefined-->
        <section class="text-center">

            <h2 class="doc-title">Predefined templates</h2>

            <p><strong>Click buttons below to launch modals demo</strong></p>

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCookie">Cookies</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">Coupon</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">Discount</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRelatedContent">Related content</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAbandonedCart">Abandoned cart</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalConfirmDelete">Confirm delete</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Poll</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCart">Cart</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPush">Push</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalYT">YouTube</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalVM">Vimeo</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalQuickView">Product</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSocial">Social share</button>

        </section>
        <!--Section: Predefined-->

    </section>
    <!-- /SECTION: Demo-->

            <div class="text-center darken-grey-text my-4">
                <h3 class="font-bold mb-3">Here you can find more Modals Examples:</h3>
                <a class="btn btn-danger" href="https://mdbootstrap.com/javascript/modals/" target="_blank">Bootstrap Modals</a>
            </div>
  
</div>
              
            
!

CSS

              
                .doc-title {
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 2rem 0;
  margin: 5rem 0 2rem;
  text-transform: uppercase;
 }
              
            
!

JS

              
                
              
            
!
999px

Console