Bootstrap testimonials section
In order to present what people say about your project use our amazing testimonials.
Testimonials v.1 MDB Pro component
Testimonials v.1
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.
.jpg)
John Doe
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.
.jpg)
Anna Aston
Neque cupiditate assumenda in maiores repudiandae mollitia architecto nubira.
.jpg)
Maria Kate
Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.
<!-- Section: Testimonials v.1 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">Testimonials v.1</h2>
<!-- Section description -->
<p class="dark-grey-text w-responsive mx-auto mb-5">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>
<!-- Grid row -->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<!--Card-->
<mdb-card class="testimonial-card">
<!--Background color-->
<div class="card-up info-color"></div>
<!--Avatar-->
<div class="avatar mx-auto white">
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle"></mdb-card-img>
</div>
<mdb-card-body>
<!--Name-->
<h4 class="font-weight-bold mb-4">John Doe</h4>
<hr>
<!--Quotation-->
<p class="dark-grey-text mt-4">
<i class="fa fa-quote-left pr-2"></i>Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.</p>
</mdb-card-body>
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-md-0 mb-4">
<!--Card-->
<mdb-card class="testimonial-card">
<!--Background color-->
<div class="card-up blue-gradient">
</div>
<!--Avatar-->
<div class="avatar mx-auto white">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-fluid">
</div>
<mdb-card-body>
<!--Name-->
<h4 class="font-weight-bold mb-4">Anna Aston</h4>
<hr>
<!--Quotation-->
<p class="dark-grey-text mt-4">
<i class="fa fa-quote-left pr-2"></i>Neque cupiditate assumenda in maiores repudiandae mollitia architecto.</p>
</mdb-card-body>
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<mdb-card class="testimonial-card">
<!--Background color-->
<div class="card-up indigo"></div>
<!--Avatar-->
<div class="avatar mx-auto white">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid">
</div>
<mdb-card-body>
<!--Name-->
<h4 class="font-weight-bold mb-4">Maria Kate</h4>
<hr>
<!--Quotation-->
<p class="dark-grey-text mt-4">
<i class="fa fa-quote-left pr-2"></i>Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.</p>
</mdb-card-body>
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
</section>
<!-- Section: Testimonials v.1 -->
Testimonials v.2 MDB Pro component
Testimonials v.2
.jpg)
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.
Anna Deynah
Founder at ET Company
.jpg)
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.
Maria Kate
Photographer at Studio LA
.jpg)
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.
John Doe
Front-end Developer in NY
<!-- Section: Testimonials v.2 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">Testimonials v.2</h2>
<!--Carousel Wrapper-->
<mdb-carousel [isControls]="false" [animation]="'slide'" class="testimonial-carousel">
<!--First slide-->
<mdb-slide>
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<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 class="font-weight-bold">Anna Deynah</h4>
<h6 class="font-weight-bold my-3">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>
</mdb-slide>
<!--/First slide-->
<!--Second slide-->
<mdb-slide>
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<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 class="font-weight-bold">Maria Kate</h4>
<h6 class="font-weight-bold my-3">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>
</mdb-slide>
<!--/Second slide-->
<!--Third slide-->
<mdb-slide>
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<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 class="font-weight-bold">John Doe</h4>
<h6 class="font-weight-bold my-3">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>
</mdb-slide>
<!--/Third slide-->
</mdb-carousel>
<!--/.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 veniam.
.jpg)
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.
.jpg)
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.
<!-- Section: Testimonials v.3 -->
<section class="team-section text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">Testimonials v.3</h2>
<!-- Section description -->
<p class="dark-grey-text w-responsive mx-auto mb-5">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>
<!--Grid row-->
<div class="row text-center">
<!--Grid column-->
<div class="col-md-4 mb-md-0 mb-5">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold dark-grey-text mt-4">Anna Deynah</h4>
<h6 class="font-weight-bold blue-text my-3">Web Designer</h6>
<p class="font-weight-normal dark-grey-text">
<i class="fa fa-quote-left pr-2"></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-md-0 mb-5">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold dark-grey-text mt-4">John Doe</h4>
<h6 class="font-weight-bold blue-text my-3">Web Developer</h6>
<p class="font-weight-normal dark-grey-text">
<i class="fa fa-quote-left pr-2"></i>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid 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">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold dark-grey-text mt-4">Maria Kate</h4>
<h6 class="font-weight-bold blue-text my-3">Photographer</h6>
<p class="font-weight-normal dark-grey-text">
<i class="fa fa-quote-left pr-2"></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
.jpg)
Anna Deynah
Web Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.
.jpg)
John Doe
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.
Abbey Clark
Photographer
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
.jpg)
Blake Dabney
Web Designer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.
.jpg)
Andrea Clay
Front-end developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.
.jpg)
Cami Gosse
Phtographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Bobby Haley
Web Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.
Elisa Janson
Marketer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
Rob Jacobs
Front-end developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.
<!-- Section: Testimonials v.4 -->
<section class="container text-center my-5 mt-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">Testimonials v.4</h2>
<!-- Grid row -->
<div class="row">
<!--Carousel Wrapper-->
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation testimonial-carousel" [type]="'carousel-multi-item'" [animation]="'slide'">
<!--First slide-->
<mdb-slide>
<!--Grid column-->
<div class="col-md-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(25).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Anna Deynah</h4>
<h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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 mx-auto" >
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">John Doe</h4>
<h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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"> </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 mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Abbey Clark</h4>
<h6 class="blue-text font-weight-bold my-3">Photographer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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-->
</mdb-slide>
<!--/First slide-->
<!--Second slide-->
<mdb-slide>
<div class="col-md-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Blake Dabney</h4>
<h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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 mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Andrea Clay</h4>
<h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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 mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Cami Gosse</h4>
<h6 class="blue-text font-weight-bold my-3">Phtographer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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-->
</mdb-slide>
<!--/Second slide-->
<!--Third slide-->
<mdb-slide>
<!--Grid column-->
<div class="col-md-4">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Bobby Haley</h4>
<h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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 mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Elisa Janson</h4>
<h6 class="blue-text font-weight-bold my-3">Marketer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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 mx-auto">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid">
</div>
<!--Content-->
<h4 class="font-weight-bold mt-4">Rob Jacobs</h4>
<h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
<p class="font-weight-normal">
<i class="fa fa-quote-left pr-2"></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-->
</mdb-slide>
<!--/Third slide-->
</mdb-carousel>
<!--/.Carousel Wrapper-->
</div>
<!-- Grid row -->
</section>
<!-- Section: Testimonials v.4 -->
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Blog Sections:
// For MDB Angular Pro
import { WavesModule, CarouselModule } from 'ng-uikit-pro-standard'