MDB React 5

Responsive React Testimonial Reviews Slider templates built with Bootstrap 5. See examples of the combination of Bootstrap carousel with testimonial reviews.

Check out React Testimonial Slider Documentation for detailed instructions & even more examples.

Basic example

1import React from "react";
2import {
3  MDBCarousel,
4  MDBCarouselInner,
5  MDBCarouselItem,
6  MDBContainer,
7  MDBRow,
8  MDBCol,
9  MDBIcon,
10} from "mdb-react-ui-kit";
11
12export default function App() {
13  return (
14    <MDBContainer className="my-5">
15      <MDBCarousel showControls dark>
16        <MDBCarouselInner>
17          <MDBCarouselItem className="active text-center">
18            <img
19              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
20              alt="avatar"
21              className="rounded-circle shadow-1-strong mb-4"
22              style={{ width: "150px" }}
23            />
24            <MDBRow className="d-flex justify-content-center">
25              <MDBCol lg="8">
26                <h5 className="mb-3">Maria Kate</h5>
27                <p>Photographer</p>
28                <p className="text-muted">
29                  <MDBIcon fas icon="quote-left" className="pe-2" />
30                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
31                  et deleniti nesciunt sint eligendi reprehenderit reiciendis,
32                  quibusdam illo, beatae quia fugit consequatur laudantium velit
33                  magnam error. Consectetur distinctio fugit doloremque.
34                </p>
35              </MDBCol>
36            </MDBRow>
37            <ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
38              <li>
39                <MDBIcon fas icon="star" size="sm" />
40              </li>
41              <li>
42                <MDBIcon fas icon="star" size="sm" />
43              </li>
44              <li>
45                <MDBIcon fas icon="star" size="sm" />
46              </li>
47              <li>
48                <MDBIcon fas icon="star" size="sm" />
49              </li>
50              <li>
51                <MDBIcon far icon="star" size="sm" />
52              </li>
53            </ul>
54          </MDBCarouselItem>
55
56          <MDBCarouselItem className="text-center">
57            <img
58              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp"
59              alt="avatar"
60              className="rounded-circle shadow-1-strong mb-4"
61              style={{ width: "150px" }}
62            />
63            <MDBRow className="d-flex justify-content-center">
64              <MDBCol lg="8">
65                <h5 className="mb-3">John Doe</h5>
66                <p>Web Developer</p>
67                <p className="text-muted">
68                  <MDBIcon fas icon="quote-left" className="pe-2" />
69                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
70                  et deleniti nesciunt sint eligendi reprehenderit reiciendis.
71                </p>
72              </MDBCol>
73            </MDBRow>
74            <ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
75              <li>
76                <MDBIcon fas icon="star" size="sm" />
77              </li>
78              <li>
79                <MDBIcon fas icon="star" size="sm" />
80              </li>
81              <li>
82                <MDBIcon fas icon="star" size="sm" />
83              </li>
84              <li>
85                <MDBIcon fas icon="star" size="sm" />
86              </li>
87              <li>
88                <MDBIcon far icon="star" size="sm" />
89              </li>
90            </ul>
91          </MDBCarouselItem>
92
93          <MDBCarouselItem className="text-center">
94            <img
95              src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
96              alt="avatar"
97              className="rounded-circle shadow-1-strong mb-4"
98              style={{ width: "150px" }}
99            />
100            <MDBRow className="d-flex justify-content-center">
101              <MDBCol lg="8">
102                <h5 className="mb-3">Anna Deynah</h5>
103                <p>Web Developer</p>
104                <p className="text-muted">
105                  <MDBIcon fas icon="quote-left" className="pe-2" />
106                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
107                  et deleniti nesciunt sint eligendi reprehenderit reiciendis,
108                  quibusdam illo, beatae quia fugit consequatur laudantium velit
109                  magnam error. Consectetur distinctio fugit doloremque.
110                </p>
111              </MDBCol>
112            </MDBRow>
113            <ul className="list-unstyled d-flex justify-content-center text-warning mb-0">
114              <li>
115                <MDBIcon fas icon="star" size="sm" />
116              </li>
117              <li>
118                <MDBIcon fas icon="star" size="sm" />
119              </li>
120              <li>
121                <MDBIcon fas icon="star" size="sm" />
122              </li>
123              <li>
124                <MDBIcon fas icon="star" size="sm" />
125              </li>
126              <li>
127                <MDBIcon far icon="star" size="sm" />
128              </li>
129            </ul>
130          </MDBCarouselItem>
131        </MDBCarouselInner>
132      </MDBCarousel>
133    </MDBContainer>
134  );
135}

How to use?

1. Download MDB 5 - FREE REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples (click on the image to see a live demo)

Multiitem carousel:

---

More extended React documentation

• 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