Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
4.4 kB
3
Indexable
Never
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css"
        integrity="sha512-ZnR2wlLbSbr8/c9AgLg3jQPAattCUImNsae6NHYnS9KrIwRdcY9DxFotXhNAKIKbAXlRnujIqUWoXXwqyFOeIQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
        crossorigin="anonymous"></script>



<!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered m-0" style="max-width: none;">
            <div class="modal-content bg-transparent border-0">
                <!-- <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div> -->
                <div class="modal-body">
                    <div class="row ">
                        <div class="col d-flex align-items-center justify-content-end">
                            <i class="bi bi-chevron-left text-dark"></i>
                        </div>
                        <div class="col ">
                            <div class="d-flex align-items-center" style="width: 600px;">
                                <img class="img-fluid"
                                src="https://images.pexels.com/photos/16146805/pexels-photo-16146805/free-photo-of-sunlit-church-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="">
                            </div>
                        </div>
                        <div class="col d-flex align-items-center">
                            <i class="bi bi-chevron-right text-dark"></i>
                        </div>
                    </div>
                </div>
                <div class="row d-flex justify-content-center">
                    <div class="" style="width: 100px; height: 100px;">
                        <img class="img-fluid"
                                src="https://images.pexels.com/photos/16146805/pexels-photo-16146805/free-photo-of-sunlit-church-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="">
                    </div>
                    <div class="" style="width: 100px; height: 100px;">
                        <img class="img-fluid"
                                src="https://images.pexels.com/photos/16146805/pexels-photo-16146805/free-photo-of-sunlit-church-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="">
                    </div>
                    <div class="" style="width: 100px; height: 100px;">
                        <img class="img-fluid"
                                src="https://images.pexels.com/photos/16146805/pexels-photo-16146805/free-photo-of-sunlit-church-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="">
                    </div>
                    <div class="" style="width: 100px; height: 100px;">
                        <img class="img-fluid"
                                src="https://images.pexels.com/photos/16146805/pexels-photo-16146805/free-photo-of-sunlit-church-building.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                                alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>