Bootstrap testimonials section

In order to present what people say about your project use our amazing testimonials.

Testimonials v.1 MDB Pro component

Testimonials

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 accusamus veniam.

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.

Anna Aston


Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Maria Kate


Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.

            
 <!--Section: Testimonials v.1-->
 <section class="pb-3 text-center">
        
    <!--Section heading-->
    <h1 class="font-bold h1 py-5">Testimonials</h1>
    <!--Section description-->
    <p class="section-description">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 accusamus veniam.</p>
    
    <div class="row">
    
        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">
    
            <!--Card-->
            <div class="card testimonial-card">
    
                <!--Background color-->
                <div class="card-up info-color"></div>
    
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-responsive">
                </div>
    
                <div class="card-body">
                    <!--Name-->
                    <h4 class="mt-1">
                        <strong>John Doe</strong>
                    </h4>
                    <hr>
                    <!--Quotation-->
                    <p class="dark-grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci.</p>
                </div>
    
            </div>
            <!--Card-->
    
        </div>
        <!--Grid column-->
    
        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">
    
            <!--Card-->
            <div class="card testimonial-card">
    
                <!--Background color-->
                <div class="card-up blue-gradient">
                </div>
    
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-responsive">
                </div>
    
                <div class="card-body">
                    <!--Name-->
                    <h4 class="mt-1">
                        <strong>Anna Aston</strong>
                    </h4>
                    <hr>
                    <!--Quotation-->
                    <p class="dark-grey-text">Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
                </div>
    
            </div>
            <!--Card-->
    
        </div>
        <!--Grid column-->
    
        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">
    
            <!--Card-->
            <div class="card testimonial-card">
    
                <!--Background color-->
                <div class="card-up indigo"></div>
    
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-responsive">
                </div>
    
                <div class="card-body">
                    <!--Name-->
                    <h4 class="mt-1">
                        <strong>Maria Kate</strong>
                    </h4>
                    <hr>
                    <!--Quotation-->
                    <p class="dark-grey-text">Delectus impedit saepe officiis ab aliquam repellat, rem totam unde ducimus.</p>
                </div>
    
            </div>
            <!--Card-->
    
        </div>
        <!--Grid column-->
    
    </div>
    
</section>
<!--Section: Testimonials v.1-->
            
        

Testimonials v.2 MDB Pro component

Testimonials

            
<!--Section: Testimonials v.2-->
<section class="text-center pb-5">
        
    <!--Section heading-->
    <h1 class="font-bold h1 py-5">Testimonials</h1>
    <!--Section description-->
    
    <!--Carousel Wrapper-->
    <div id="carousel-example-1" class="carousel no-flex testimonial-carousel slide carousel-fade" data-ride="carousel" data-interval="false">
    
        <!--Slides-->
        <div class="carousel-inner" role="listbox">
            <!--First slide-->
            <div class="carousel-item active">
    
                <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                        <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae
                        quaerat ad velit ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore cum accusamus eveniet
                        molestias voluptatum inventore laboriosam labore sit, aspernatur praesentium iste impedit quidem dolor
                        veniam.</p>
    
                    <h4>Anna Deynah</h4>
                    <h6>Founder at ET Company</h6>
    
                    <!--Review-->
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star-half-full blue-text"> </i>
                </div>
    
            </div>
            <!--First slide-->
    
            <!--Second slide-->
            <div class="carousel-item">
    
                <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle img-fluid" alt="Second sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                        <i class="fa fa-quote-left"></i> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                        magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
                        quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                        labore. </p>
    
                    <h4>Maria Kate</h4>
                    <h6>Photographer at Studio LA</h6>
    
                    <!--Review-->
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                </div>
    
            </div>
            <!--Second slide-->
    
            <!--Third slide-->
            <div class="carousel-item">
    
                <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle img-fluid" alt="Third sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                        <i class="fa fa-quote-left"></i> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                        laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    
                    <h4>John Doe</h4>
                    <h6>Front-end Developer in NY</h6>
    
                    <!--Review-->
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star blue-text"> </i>
                    <i class="fa fa-star-o blue-text"> </i>
                </div>
    
            </div>
            <!--Third slide-->
    
        </div>
        <!--Slides-->
    
        <!--Controls-->
        <a class="carousel-item-prev left carousel-control" href="#carousel-example-1" role="button" data-slide="prev">
            <span class="icon-prev" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-item-next right carousel-control" href="#carousel-example-1" role="button" data-slide="next">
            <span class="icon-next" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <!--Controls-->
    
    </div>
    <!--Carousel Wrapper-->
    
</section>
<!--Section: Testimonials v.2-->
            
        

Testimonials v.3 MDB Pro component

Testimonials v.3

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 accusamus veniam.

Anna Deynah

Web 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 ex ea commodi.

Maria Kate

Photographer

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

            
<!--Section: Testimonials v.3-->
<section class="section team-section text-center pb-3">

    <!--Section heading-->
    <h1 class="font-bold h1 py-5">Testimonials v.3</h1>
    <!--Section description-->
    <p class="section-description">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 accusamus veniam.</p>

    <!--Grid row-->
    <div class="row text-center">

        <!--Grid column-->
        <div class="col-md-4 mb-r">

            <div class="testimonial">
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
                </div>

                <!--Content-->
                <h4 class="mb-3 dark-grey-text">
                    <strong>Anna Deynah</strong>
                </h4>
                <h6 class="mb-3 font-bold blue-text">Web Designer</h6>
                <p>
                    <i class="fa fa-quote-left grey-text"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae
                    quaerat ad velit ab hic tenetur.</p>

                <!--Review-->
                <div class="orange-text">
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star-half-full"> </i>
                </div>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-4 mb-r">
            <div class="testimonial">
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1 img-fluid">
                </div>

                <!--Content-->
                <h4 class="mb-3 dark-grey-text">
                    <strong>John Doe</strong>
                </h4>
                <h6 class="mb-3 font-bold blue-text">Web Developer</h6>
                <p>
                    <i class="fa fa-quote-left grey-text"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                    aliquid ex ea commodi.</p>

                <!--Review-->
                <div class="orange-text">
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                </div>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-4 mb-r">
            <div class="testimonial">
                <!--Avatar-->
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
                </div>
                <!--Content-->
                <h4 class="mb-3 dark-grey-text">
                    <strong>Maria Kate</strong>
                </h4>
                <h6 class="mb-3 font-bold blue-text">Photographer</h6>
                <p>
                    <i class="fa fa-quote-left grey-text"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
                    deleniti atque corrupti.</p>

                <!--Review-->
                <div class="orange-text">
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star"> </i>
                    <i class="fa fa-star-o"> </i>
                </div>

            </div>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Testimonials v.3-->
            
        

Testimonials v.4 MDB Pro component

Testimonials v.4

            
<!--Section: Testimonials v.4-->
<section class="section text-center pb-4">
    
    <!--Section heading-->
    <h1 class="font-bold h1 py-5">Testimonials v.4</h1>
    
    <div class="row">

        <!--Carousel Wrapper-->
        <div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item wow fadeIn" data-ride="carousel">

            <!--Controls-->
            <div class="controls-top">
                <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
            </div>
            <!--Controls-->

            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="#multi-item-example" data-slide-to="0" class="active light-blue darken-4"></li>
                <li data-target="#multi-item-example" data-slide-to="1" class="light-blue darken-4"></li>
                <li data-target="#multi-item-example" data-slide-to="2" class="light-blue darken-4"></li>
            </ol>
            <!--Indicators-->

            <!--Slides-->
            <div class="carousel-inner" role="listbox">

                <!--First slide-->
                <div class="carousel-item active">
                    <!--Grid column-->
                    <div class="col-md-4">

                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Anna Deynah</h4>
                            <h6 class="blue-text font-bold">Web Designer</h6>
                            <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-half-full"> </i>
                            </div>
                        </div>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>John Doe</h4>
                            <h6 class="blue-text font-bold">Web Developer</h6>
                            <p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->
                    
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Abbey Clark</h4>
                            <h6 class="blue-text font-bold">Photographer</h6>
                            <p><i class="fa fa-quote-left"></i> Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.</p>
                            
                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-o"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--First slide-->

                <!--Second slide-->
                <div class="carousel-item">
                    <!--Grid column-->
                    <div class="col-md-4">

                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Blake Dabney</h4>
                            <h6 class="blue-text font-bold">Web Designer</h6>
                            <p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-half-full"> </i>
                            </div>
                        </div>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Andrea Clay</h4>
                            <h6 class="blue-text font-bold">Front-end developer</h6>
                            <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Cami Gosse</h4>
                            <h6 class="blue-text font-bold">Phtographer</h6>
                            <p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-o"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Second slide-->

                <!--Third slide-->
                <div class="carousel-item">
                    <!--Grid column-->
                    <div class="col-md-4">

                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Bobby Haley</h4>
                            <h6 class="blue-text font-bold">Web Developer</h6>
                            <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                            </div>
                        </div>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Elisa Janson</h4>
                            <h6 class="blue-text font-bold">Marketer</h6>
                            <p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-half-full"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Robert Jacobs</h4>
                            <h6 class="blue-text font-bold">Front-end developer</h6>
                            <p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>

                            <!--Review-->
                            <div class="grey-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-o"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Third slide-->

            </div>
            <!--Slides-->

        </div>
        <!--Carousel Wrapper-->

    </div>

</section>
<!--Section: Testimonials v.4-->