How to Create Testimonial Slider in Bootstrap?
Last Updated :
10 May, 2024
Testimonial Sliders are interactive components in web design, often used to display multiple images or content sequentially. They’re useful for showcasing testimonials of the students or users one after another. Here, we will see how to create a testimonial Slider in Bootstrap 5.
Approach
- First, create a basic HTML structure for the testimonial Slider and add the Bootstrap 5 CDN links.
- Then use the “container” class to wrap your testimonial slider; within it, use the “carousel” class to define the carousel.
- Within the carousel, use the “carousel-inner”. Use the “carousel-inner” to hold the carousel items within the carousel.
- Apply Bootstrap 5 utility classes like “w-50” and “h-50” to set the width and height of the testimonial slider
- And use those utility classes like “img-fluid“, “bg-secondary”, “bg-gradient”, and “text-light” to make the responsive image, background colors, and text color.
- Use flexbox utilities like and “justify-content-center” to center the carousel horizontally.
Example: The example below shows how to create a testimonial Slider in Bootstrap 5.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to create Testimonial
Carousel using Bootstrap5
</title>
<link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap"
rel="stylesheet">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-success">
<section class="d-grid align-items-center
mt-5 h-100 rounded">
<div class="container rounded">
<h1 class="section-header position-relative
pb-3 text-center fw-bold text-light">
Testimonial Slider in Bootstrap 5
</h1>
<div id="carouselExampleControls"
class="carousel slide w-50 h-50
mx-auto position-relative"
data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="bg-light text-dark
p-3 m-4">
<div class="row">
<div class="col-md-5">
<div class="mb-3 text-center">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="slide 1"
class="w-50 h-50 rounded-circle
border border-5
border-success">
</div>
<div class="bio">
<h2>John Doe</h2>
<p class="text-success
mb-2 fw-bold">
Web Developer
</p>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<p class="text-warning mb-0">
Rating: ★★★★★
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p class="text-justify">
<span class="d-block fs-7
text-primary me-2">
<i class="fa fa-quote-left
text-success">
</i>
Hello, I have been practicing
questions on this site for the
last 2 years and recently I
got placed at Google. Really
loved the breadth of concepts
and topics available on this
site. Great work guys!! Thank you
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="bg-light text-dark p-3 m-4">
<div class="row">
<div class="col-md-5">
<div class="mb-3 text-center">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="slide 2"
class="w-50 h-50
rounded-circle
border border-5
border-success">
</div>
<div class="bio">
<h2>Jane Smith</h2>
<p class="text-success
mb-2 fw-bold">
Frontend Developer
</p>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<div class="rating-container">
<p class="text-warning
mb-0">
Rating: ★★★★☆
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p class="text-justify">
<span class="d-block fs-7
text-primary
me-2">
<i class="fa fa-quote-left
text-success">
</i>
Hello, I have been practicing
questions on this site for the
last 2 years and recently I
got placed at Google. Really
loved the breadth of concepts
and topics available on this
site. Great work guys!! Thank you
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="bg-light text-dark p-3 m-4">
<div class="row">
<div class="col-md-5">
<div class="mb-3 text-center">
<div class="img-area">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="slide 3"
class="w-50 h-50
rounded-circle
border border-5
border-success">
</div>
<div class="bio">
<h2>Alex Johnson</h2>
<p class="text-success
mb-2 fw-bold">
UI/UX Designer
</p>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="rating-container">
<p class="text-warning
mb-0">
Rating: ★★★★☆
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="content">
<p class="text-justify">
<span class="d-block fs-7
text-primary
me-2">
<i class="fa fa-quote-left
text-success">
</i>
Hello, I have been practicing
questions on this site for the
last 2 years and recently I
got placed at Google. Really
loved the breadth of concepts
and topics available on this
site. Great work guys!! Thank you
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon
bg-info"
aria-hidden="true">
</span>
<span class="visually-hidden">
Previous
</span>
</button>
<button class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon
bg-info"
aria-hidden="true">
</span>
<span class="visually-hidden">
Next
</span>
</button>
</div>
</div>
</section>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Output
Share your thoughts in the comments
Please Login to comment...