Angular Bootstrap Testimonials section

Angular testimonials section - Bootstrap 4 & Material Design

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.

John Doe

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

Anna Aston

Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Maria Kate

Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.

HTML



        <!-- 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="fas 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="fas 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="fas 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

HTML



        <!-- 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="fas 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="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star-half 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="fas 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="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas 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="fas 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="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="fas fa-star blue-text"> </i>
                <i class="far fa-star 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.

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 commodi.

Maria Kate

Photographer

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

HTML



        <!-- 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="fas 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="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star-half"> </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="fas 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="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas 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="fas 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="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="fas fa-star"> </i>
                  <i class="far fa-star"> </i>
                </div>
              </div>

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

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

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

Testimonials v.4 MDB Pro component



        <!-- 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="fas 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="fas fa-star" [ngClass]="{'fa-star-half-full' : i == 4}" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" [ngClass]="{'fa-star-o' : i == 4}" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" [ngClass]="{'fa-star-half-full' : i == 4}" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" [ngClass]="{'fa-star-o' : i == 4}" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" [ngClass]="{'fa-star-half-full' : i == 4}" *ngFor="let star of stars; let i = index"></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="fas 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="fas fa-star" [ngClass]="{'fa-star-o' : i == 4}" *ngFor="let star of stars; let i = index"></i>
                    </div>
                  </div>
                </div>
                <!--Grid column-->
              </mdb-slide>
              <!--/Third slide-->
            </mdb-carousel>
            <!--/.Carousel Wrapper-->
          </div>
          <!-- Grid row -->
        </section>
        <!-- Section: Testimonials v.4 -->


        import { Component } from '@angular/core';

        @Component({
          selector: 'carousel',
          templateUrl: './carousel.component.html',
          styleUrls: ['./carousel.component.scss'],
        })
        export class CarouselComponent {
          stars = Array(5);
        }

Angular Testimonials - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular testimonials sections.

Modules used

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.

// MDB Angular Pro
import { CardsFreeModule, CarouselModule, WavesModule } from 'ng-uikit-pro-standard'

Import example Modules list

Introduction
Modules used