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.
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
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
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’s how I would describe Jeramy and his team at The
Lorem Ipsum Company. When it comes
to content marketing, you’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
What Our Students Say
Mahadi Mansura
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.
Mahadi Mansura
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.
Mahadi Mansura
<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
<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>