Responsive React Testimonials / Reviews templates built with Bootstrap 5. Testimonial page and section templates with stars, images, background images, cards & more.
Check out React Testimonials / Reviews Documentation for detailed instructions & even more examples.
import React from "react";
import {
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8" className="text-center">
<h3 className="mb-4">Testimonials</h3>
<p className="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</MDBCol>
</MDBRow>
<MDBRow className="text-center">
<MDBCol md="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">Maria Smantha</h5>
<h6 className="text-primary mb-3">Web Developer</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-half-alt"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol md="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(2).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Lisa Cudrow</h5>
<h6 className="text-primary mb-3">Graphic Designer</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" size="sm" className="text-warning" />
</li>
</MDBTypography>
</MDBCol>
<MDBCol md="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(9).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">John Smith</h5>
<h6 className="text-primary mb-3">Marketing Specialist</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>
);
}
-
Download MDB 5 - FREE REACT UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
You can find other examples here.
- React Bootstrap Code
- React Bootstrap Gallery
- React Bootstrap Hamburger Menu
- React Bootstrap Jumbotron
- React Bootstrap Maps
- React Bootstrap Mega Menu
- React Bootstrap Media object
- React Bootstrap Multiselect
- React Bootstrap Masonry
- React Bootstrap Contact form
- React Bootstrap Gradients
- React Bootstrap Pagination
- React Bootstrap Panels
- React Bootstrap Social Media icons & buttons
- React Bootstrap Search
- React Bootstrap Table sort
- React Bootstrap Table responsive
- React Bootstrap Table scroll
- React Bootstrap Table search
- React Bootstrap Textarea
- React Bootstrap Sidebar
- React Bootstrap Profiles
- React Bootstrap Nested Dropdown
- React Bootstrap Address Form
- React Scroll Back to Top button
- React Product Cards
- React Avatar
- React Carousel Slider with Thumbnails
- React Chat
- React Comparison table
- React Comments
- React Drawer
- React FAQ component / section
- React Invoice
- React News feed
- React Offcanvas
- React Order details
- React Page transitions
- React Quotes
- React Payment forms
- React Select with custom Input
- React Square Buttons
- React Testimonial Slider