Modal
Modal
Example

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

 
Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<!-- 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">
        <div class="modal-content">
            <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">
                Woo-hoo, you're reading this text in a modal!
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
Static backdrop

This is slider 2

Student Reviews

What Our Students Say

<div class="rs-testimonial style4">
            <div class="container">
                <div class="left-top-shape js-tilt"><img src="assets/images/shape/circle-shape.png" alt="" /></div>
                <div class="sec-title mb-60 md-mb-30 text-center">
                    <div class="sub-title primary">Student Reviews</div>
                    <h2 class="title mb-0">What Our Students Say</h2>
                </div>
                <div class="rs-carousel owl-carousel" data-loop="true" data-items="3" data-margin="30" data-autoplay="true"
                    data-hoverpause="true" data-autoplay-timeout="5000" data-smart-speed="800" data-dots="false"
                    data-nav="false" data-md-device="3" data-md-device-nav="false" data-md-device-dots="false"
                    data-center-mode="false" data-ipad-device2="1" data-ipad-device-nav2="false" data-ipad-device-dots2="false"
                    data-ipad-device="2" data-ipad-device-nav="false" data-ipad-device-dots="false" data-mobile-device="1"
                    data-mobile-device-nav="false" data-mobile-device-dots="false">
                    <div class="testi-item">
                        <div class="row no-gutter">
                            <div class="col-md-4">
                                <div class="user-img"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/4.jpg" alt="" /></div>
                            </div>
                            <div class="col-md-8">
                                <div class="user-info"><i class="flaticon-phrase"></i>
                                    <div class="desc">Education is the passport to the future
                                        for tomorrow belongs to those who pre pare for it
                                        today.Sed ut perspiciatis unde omnis iste natus error
                                        sit vo luptatem accusantium do loremque laudantium.
                                    </div>
                                    <a class="name" href="#">Mahadi Monsura</a> <span class="designation">Student</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testi-item">
                        <div class="row no-gutter">
                            <div class="col-md-4">
                                <div class="user-img"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/12.jpg" alt="" /></div>
                            </div>
                            <div class="col-md-8">
                                <div class="user-info"><i class="flaticon-phrase"></i>
                                    <div class="desc">Education is the passport to the future
                                        for tomorrow belongs to those who pre pare for it
                                        today.Sed ut perspiciatis unde omnis iste natus error
                                        sit vo luptatem accusantium do loremque laudantium.
                                    </div>
                                    <a class="name" href="#">Mahadi Monsura</a> <span class="designation">Student</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testi-item">
                        <div class="row no-gutter">
                            <div class="col-md-4">
                                <div class="user-img"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/10.jpg" alt="" /></div>
                            </div>
                            <div class="col-md-8">
                                <div class="user-info"><i class="flaticon-phrase"></i>
                                    <div class="desc">Education is the passport to the future
                                        for tomorrow belongs to those who pre pare for it
                                        today.Sed ut perspiciatis unde omnis iste natus error
                                        sit vo luptatem accusantium do loremque laudantium,
                                    </div>
                                    <a class="name" href="#">Mahadi Monsura </a> <span class="designation">Student</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Add more testimonials as needed -->
                </div>
            </div>
        </div>
        </div>
Scrolling long content

This is slider 3

Testimonial

What Students Are Saying

<div class="rs-testimonial home-style1">
            <div class="container">
                <div class="sec-title mb-50 md-mb-30 text-center">
                    <div class="sub-title primary">Testimonial</div>
                    <h2 class="title mb-0">What Students Are Saying</h2>
                </div>
                <div class="rs-carousel owl-carousel owl-theme" data-loop="true" data-items="2" data-margin="30"
                    data-autoplay="true" data-hoverpause="true" data-autoplay-timeout="5000" data-smart-speed="800"
                    data-dots="true" data-nav="false" data-md-device="2" data-md-device-nav="false" data-md-device-dots="true"
                    data-center-mode="false" data-ipad-device2="1" data-ipad-device-nav2="false" data-ipad-device-dots2="true"
                    data-ipad-device="2" data-ipad-device-nav="false" data-ipad-device-dots="true" data-mobile-device="1"
                    data-mobile-device-nav="false" data-mobile-device-dots="true">
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/quote2.png" alt="quote" style="aspect-ratio: unset;" />
                                Professional, responsive, and able to keep up with ever-changing
                                demand and tight deadlines:
                                That&rsquo;s how I would describe Jeramy and his team at The
                                Lorem Ipsum Company. When it comes
                                to content marketing, you&rsquo;ll definitely get the 5-star
                                treatment from the Lorem Ipsum
                                Company.</div>
                            <div class="author-img"><img style="aspect-ratio: unset;"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/peoplee.png" alt="author" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Mahadi Monsura</a>
                            <span class="designation">Student</span>
                        </div>
                    </div>
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/quote2.png" alt="quote" style="aspect-ratio: unset;" /> I was
                                skeptical of SEO and content marketing at first, but the Lorem
                                Ipsum Company not only proved
                                itself financially speaking, but the response I have received
                                from customers is incredible. The
                                work is top-notch and I consistently outrank all my competitors
                                ll definitely get the 5-star </div>
                            <div class="author-img"><img style="aspect-ratio: unset;"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/peoplee2.png" alt="author" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Alex Fenando</a> <span class="designation">English
                                Teacher</span></div>
                    </div>
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/quote2.png" alt="quote" style="aspect-ratio: unset;" /> After
                                being forced to move twice within five years, our customers had
                                a hard time finding us and our
                                sales plummeted. The Lorem Ipsum Co. not only revitalized our
                                brand, but saved our nearly
                                100-year-old family business from the brink of ruin by
                                optimizing our website for SEO Our
                                Clients.</div>
                            <div class="author-img"><img style="aspect-ratio: unset;"
                                    src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/peoplee1.png" alt="author" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Losis Dcosta</a> <span class="designation">Math
                                Teacher</span></div>
                    </div>
                </div>
            </div>
        </div>
Vertically centered

This is slider 4

Testimonials

What Our Students Say

<div class="rs-testimonial style6">
            <div class="container">
                <div class="sec-title text-center mb-70 md-mb-45">
                    <div class="sub-title">Testimonials</div>
                    <h2 class="title title-color">What Our Students Say</h2>
                </div>
                <div class="rs-carousel owl-carousel nav owl-loaded owl-drag" data-loop="false" data-items="1" data-margin="30"
                    data-autoplay="false" data-hoverpause="true" data-autoplay-timeout="5000" data-smart-speed="800"
                    data-dots="false" data-nav="false" data-nav-speed="false" data-center-mode="false" data-mobile-device="1"
                    data-mobile-device-nav="false" data-mobile-device-dots="false" data-ipad-device="1"
                    data-ipad-device-nav="false" data-ipad-device-dots="false" data-ipad-device2="1"
                    data-ipad-device-nav2="false" data-ipad-device-dots2="false" data-md-device="1" data-md-device-nav="false"
                    data-md-device-dots="false">
                    <div class="testimonial-item">
                        <div class="row">
                            <div class="col-lg-4 offset-lg-1">
                                <div class="img-part"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/people.png" alt="" /></div>
                            </div>
                            <div class="col-lg-7">
                                <div class="content-part">
                                    <div class="content-wrap">
                                        <div class="text">
                                            <p>Education is the passport to the future for tomorrow belongs to those who prepare
                                                for it today. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
                                            </p>
                                        </div>
                                        <div class="info">
                                            <div class="cite">
                                                <h3 class="name">Mahadi Mansura</h3>
                                            </div>
                                            <span class="position">CSE Student</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Ulangi .testimonial-item untuk setiap testimonial -->
                    <div class="testimonial-item">
                        <div class="row">
                            <div class="col-lg-4 offset-lg-1">
                                <div class="img-part"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/people.png" alt="" /></div>
                            </div>
                            <div class="col-lg-7">
                                <div class="content-part">
                                    <div class="content-wrap">
                                        <div class="text">
                                            <p>Education is the passport to the future for tomorrow belongs to those who prepare
                                                for it today. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
                                            </p>
                                        </div>
                                        <div class="info">
                                            <div class="cite">
                                                <h3 class="name">Mahadi Mansura</h3>
                                            </div>
                                            <span class="position">CSE Student</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-item">
                        <div class="row">
                            <div class="col-lg-4 offset-lg-1">
                                <div class="img-part"><img style="aspect-ratio: unset;"
                                        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/08/people.png" alt="" /></div>
                            </div>
                            <div class="col-lg-7">
                                <div class="content-part">
                                    <div class="content-wrap">
                                        <div class="text">
                                            <p>Education is the passport to the future for tomorrow belongs to those who prepare
                                                for it today. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
                                            </p>
                                        </div>
                                        <div class="info">
                                            <div class="cite">
                                                <h3 class="name">Mahadi Mansura</h3>
                                            </div>
                                            <span class="position">CSE Student</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>​
Tooltips and popovers

This is slider 5

What Our Client Says

Our Clients Review
<div class="rs-testimonial style5">
            <div class="container">
                <div class="sec-title mb-15 text-center">
                    <h2 class="title extra-bold mb-15 sm-mb-10">What Our Client Says</h2>
                    <div class="sub-title capitalize">Our Clients Review</div>
                </div>
                <div class="rs-carousel owl-carousel owl-loaded owl-drag" data-loop="true"
                    data-items="3" data-margin="30" data-autoplay="true" data-hoverpause="true"
                    data-autoplay-timeout="5000" data-smart-speed="800" data-dots="true"
                    data-nav="false" data-nav-speed="false" data-md-device="3"
                    data-md-device-nav="false" data-md-device-dots="true"
                    data-center-mode="false" data-ipad-device2="2" data-ipad-device-nav2="false"
                    data-ipad-device-dots2="true" data-ipad-device="2"
                    data-ipad-device-nav="false" data-ipad-device-dots="true"
                    data-mobile-device="1" data-mobile-device-nav="false"
                    data-mobile-device-dots="false">
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="assets/images/testimonial/style5/quote.png"
                                    style="aspect-ratio: unset;"
                                    alt="" />Education is the passport to the future for
                                tomorrow belongs to those who prepare for it today. Sed ut
                                perspiciatis unde omnis iste natus error sit voluptatem</div>
                            <div class="author-img"><img
                                    src="assets/images/testimonial/style5/3.png" alt="" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Mahadi Monsura</a>
                            <span class="designation">Student</span>
                        </div>
                    </div>
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="assets/images/testimonial/style5/quote.png"
                                    alt="" />Education is the passport to the future for
                                tomorrow belongs to those who prepare for it today. Sed ut
                                perspiciatis unde omnis iste natus error sit voluptatem</div>
                            <div class="author-img"><img
                                    src="assets/images/testimonial/style5/4.png" alt="" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Mahadi Monsura</a>
                            <span class="designation">Student</span>
                        </div>
                    </div>
                    <div class="testi-item">
                        <div class="author-desc">
                            <div class="desc"><img class="quote"
                                    src="assets/images/testimonial/style5/quote.png"
                                    alt="" />Education is the passport to the future for
                                tomorrow belongs to those who prepare for it today. Sed ut
                                perspiciatis unde omnis iste natus error sit voluptatem</div>
                            <div class="author-img"><img
                                    src="assets/images/testimonial/style5/1.png" alt="" /></div>
                        </div>
                        <div class="author-part"><a class="name" href="#">Mahadi Monsura</a>
                            <span class="designation">Student</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>