@themesberg/pixel-lite-bootstrap-ui-kit/src/partials/components/_modals.html

Open-source Bootstrap 5 UI Kit

<!-- Section -->
<div class="section section-md">
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-2">
                <!-- Button Modal -->
                <div class="d-grid">
                    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
                        data-bs-target="#modal-default">Default</button>
                </div>
                <!-- Modal Content -->
                <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h2 class="h6 modal-title">Terms of Service</h2>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p>With less than a month to go before the European Union enacts new consumer privacy
                                    laws for its citizens, companies around the world are updating their terms of
                                    service agreements to comply.</p>
                                <p>The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect
                                    on May 25 and is meant to ensure a common set of data rights in the European Union.
                                    It requires organizations to notify users as
                                    soon as possible of high-risk data breaches that could personally affect them.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary">I accept</button>
                                <button type="button" class="btn btn-link ms-auto"
                                    data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End of Modal Content -->
            </div>
            <div class="col-md-2">
                <!-- Button Modal -->
                <div class="d-grid">
                    <button type="button" class="btn btn-block btn-primary mb-3" data-bs-toggle="modal"
                        data-bs-target="#modal-notification">Notification</button>
                </div>
                <!-- Modal Content -->
                <div class="modal fade" id="modal-notification" tabindex="-1" role="dialog"
                    aria-labelledby="modal-notification" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content bg-primary text-white">
                            <div class="modal-header border-0">
                                <button type="button" class="btn-close bg-gray-500" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="py-3 text-center">
                                    <span class="modal-icon display-1-lg"><span
                                            class="far fa-envelope-open"></span></span>
                                    <h2 class="h4 modal-title my-3">Important message!</h2>
                                    <p class="px-lg-5">Do you know that you can assign status and relation to a company
                                        right in the visit list?.</p>
                                </div>
                            </div>
                            <div class="modal-footer border-secondary">
                                <button type="button" class="btn btn-sm btn-white">Go to Inbox</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End of Modal Content -->
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->