Testimonial Slider
React Bootstrap 5 Testimonial Slider
Responsive React Testimonial Reviews Slider templates built with Bootstrap 5. See examples of the combination of Bootstrap carousel with testimonial reviews.
Testimonial Slider Template
A basic example of a responsive testimonial carousel with a single review per slide. Each review contains the customers profile picture, a stylized review quotation and a star rating.
.webp)
Maria Kate
Photographer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.
.webp)
John Doe
Web Developer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis.
.webp)
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.
import React from "react";
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBContainer,
MDBRow,
MDBCol,
MDBIcon,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="my-5">
<MDBCarousel showControls dark>
<MDBCarouselInner>
<MDBCarouselItem className="active text-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
alt="avatar"
className="rounded-circle shadow-1-strong mb-4"
style={{ width: "150px" }}
/>
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="8">
<h5 className="mb-3">Maria Kate</h5>
<p>Photographer</p>
<p className="text-muted">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
et deleniti nesciunt sint eligendi reprehenderit reiciendis,
quibusdam illo, beatae quia fugit consequatur laudantium velit
magnam error. Consectetur distinctio fugit doloremque.
</p>
</MDBCol>
</MDBRow>
<ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon far icon="star" size="sm" />
</li>
</ul>
</MDBCarouselItem>
<MDBCarouselItem className="text-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp"
alt="avatar"
className="rounded-circle shadow-1-strong mb-4"
style={{ width: "150px" }}
/>
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="8">
<h5 className="mb-3">John Doe</h5>
<p>Web Developer</p>
<p className="text-muted">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
et deleniti nesciunt sint eligendi reprehenderit reiciendis.
</p>
</MDBCol>
</MDBRow>
<ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon far icon="star" size="sm" />
</li>
</ul>
</MDBCarouselItem>
<MDBCarouselItem className="text-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
alt="avatar"
className="rounded-circle shadow-1-strong mb-4"
style={{ width: "150px" }}
/>
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="8">
<h5 className="mb-3">Anna Deynah</h5>
<p>Web Developer</p>
<p className="text-muted">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
et deleniti nesciunt sint eligendi reprehenderit reiciendis,
quibusdam illo, beatae quia fugit consequatur laudantium velit
magnam error. Consectetur distinctio fugit doloremque.
</p>
</MDBCol>
</MDBRow>
<ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" />
</li>
<li>
<MDBIcon far icon="star" size="sm" />
</li>
</ul>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
</MDBContainer>
);
}
Multiitem carousel
An example of the usage with a multi item carousel. More reviews on a single slide, ideal for landing pages, pricing pages, or even in a shopping cart to encourage the customer during the last step of the purchase.
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
John Doe
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
.webp)
John Doe
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
Alex Rey
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.webp)
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
.webp)
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
John Doe
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.webp)
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
import React from "react";
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCol,
MDBIcon,
MDBTypography,
MDBContainer,
MDBRow,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCarousel showControls dark>
<MDBCarouselInner>
<MDBCarouselItem className="active">
<MDBContainer>
<MDBRow className="text-center">
<MDBCol lg="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Anna Deynah</h5>
<h6 className="text-primary mb-3">UX Designer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quod eos id officiis hic tenetur quae quaerat ad velit ab
hic tenetur.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">John Doe</h5>
<h6 className="text-primary mb-3">Web Developer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid commodi.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star-half-alt"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Maria Kate</h5>
<h6 className="text-primary mb-3">Photographer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque
corrupti.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
far
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBContainer>
<MDBRow className="text-center">
<MDBCol lg="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(3).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">John Doe</h5>
<h6 className="text-primary mb-3">UX Designer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quod eos id officiis hic tenetur quae quaerat ad velit ab
hic tenetur.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(4).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Alex Rey</h5>
<h6 className="text-primary mb-3">Web Developer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid commodi.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star-half-alt"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(5).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Maria Kate</h5>
<h6 className="text-primary mb-3">Photographer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque
corrupti.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
far
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBContainer>
<MDBRow className="text-center">
<MDBCol lg="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(6).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Anna Deynah</h5>
<h6 className="text-primary mb-3">UX Designer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quod eos id officiis hic tenetur quae quaerat ad velit ab
hic tenetur.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(8).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">John Doe</h5>
<h6 className="text-primary mb-3">Web Developer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid commodi.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star-half-alt"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol lg="4" className="d-none d-lg-block">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(7).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Maria Kate</h5>
<h6 className="text-primary mb-3">Photographer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque
corrupti.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
fas
icon="star"
size="sm"
className="text-warning"
/>
</li>
<li>
<MDBIcon
far
icon="star"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
</MDBContainer>
);
}
.carousel-inner {
height: 538px;
}
.carousel-control-prev {
height: 50px;
left: unset !important;
position: fixed !important;
top: -5px !important;
right: 50%;
color: gray !important;
}
.carousel-control-next {
height: 50px;
right: unset !important;
position: fixed !important;
top: -5px !important;
left: 50%;
color: gray !important;
}