Rate this docs

Vue Bootstrap Testimonials Sections

Vue Testimonials Sections - Bootstrap 4 & Material Design

Vue Bootstrap Testimonials can be used to present what people say about your project.

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.


<template>
  <mdb-container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.1</h2>
      <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>
      <mdb-row>
        <mdb-col lg="4" md="12" class="mb-lg-0 mb-4">
          <mdb-card testimonial>
            <mdb-card-up color="info"></mdb-card-up>
            <mdb-avatar class="mx-auto white">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid"/>
            </mdb-avatar>
            <mdb-card-body>
              <h4 class="font-weight-bold mb-4">John Doe</h4>
              <hr/>
              <p class="dark-grey-text mt-4"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.</p>
            </mdb-card-body>
          </mdb-card>
        </mdb-col>
        <mdb-col lg="4" md="6" class="mb-lg-0 mb-4">
          <mdb-card testimonial>
            <mdb-card-up gradient="blue"></mdb-card-up>
            <mdb-avatar class="mx-auto white">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-fluid"/>
            </mdb-avatar>
            <mdb-card-body>
              <h4 class="font-weight-bold mb-4">Anna Aston</h4>
              <hr/>
              <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>
        </mdb-col>
        <mdb-col lg="4" md="6" class="mb-lg-0 mb-4">
          <mdb-card testimonial>
            <mdb-card-up class="indigo"></mdb-card-up>
            <mdb-avatar class="mx-auto white">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid"/>
            </mdb-avatar>
            <mdb-card-body>
              <h4 class="font-weight-bold mb-4">Maria Kate</h4>
              <hr/>
              <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>
        </mdb-col>
      </mdb-row>
    </section>
    <section class="text-center my-5">
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardUp, mdbAvatar, mdbIcon } from 'mdbvue';

export default {
  name: 'TestimonialsPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardUp,
    mdbAvatar,
    mdbIcon
  },
  data() {
    return {
    };
  }
};
</script>

<style scoped>
</style>
            

Testimonials v.2 MDB Pro component

Testimonials


<template>
  <mdb-container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.2</h2>
      <mdb-carousel testimonial fade :interval="5000" showControls>
        <mdb-carousel-item>
          <mdb-testimonial>
            <mdb-avatar class="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"/>
            </mdb-avatar>
            <p>
              <mdb-icon icon="quote-left"></mdb-icon> 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>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star-half-full" class="blue-text"> </mdb-icon>
          </mdb-testimonial>
        </mdb-carousel-item>
        <mdb-carousel-item>
          <mdb-testimonial>
            <mdb-avatar class="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"/>
            </mdb-avatar>
            <p>
              <mdb-icon icon="quote-left"></mdb-icon> 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>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
          </mdb-testimonial>
        </mdb-carousel-item>
        <mdb-carousel-item>
          <mdb-testimonial>
            <mdb-avatar class="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"/>
            </mdb-avatar>
            <p>
              <mdb-icon icon="quote-left"></mdb-icon> 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>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star" class="blue-text"> </mdb-icon>
            <mdb-icon icon="star-o" class="blue-text"> </mdb-icon>
          </mdb-testimonial>
        </mdb-carousel-item>
      </mdb-carousel>
    </section>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardUp, mdbAvatar, mdbIcon, mdbCarousel, mdbCarouselItem, mdbTestimonial } from 'mdbvue';

export default {
  name: 'TestimonialsPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardUp,
    mdbAvatar,
    mdbIcon,
    mdbCarousel,
    mdbCarouselItem,
    mdbTestimonial
  }
};
</script>

<style scoped>
</style>
            

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.


<template>
  <mdb-container>
    <section class="team-section text-center my-5">
      <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.3</h2>
      <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>
      <mdb-row class="text-center">
        <mdb-col md="4" class="mb-md-0 mb-5">
          <mdb-testimonial>
            <mdb-avatar class="mx-auto">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid"/>
            </mdb-avatar>
            <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">
              <mdb-icon class="fa fa-quote-left pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>
            <div class="orange-text">
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star-half-full"> </mdb-icon>
            </div>
          </mdb-testimonial>
        </mdb-col>
        <mdb-col md="4" class="mb-md-0 mb-5">
          <mdb-testimonial>
            <mdb-avatar class="mx-auto">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1 img-fluid"/>
            </mdb-avatar>
            <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">
              <mdb-icon class="fa fa-quote-left pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.</p>
            <div class="orange-text">
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
            </div>
          </mdb-testimonial>
        </mdb-col>
        <mdb-col md="4">
          <mdb-testimonial>
            <mdb-avatar class="mx-auto">
              <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid"/>
            </mdb-avatar>
            <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">
              <mdb-icon class="fa fa-quote-left pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>
            <div class="orange-text">
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star"> </mdb-icon>
              <mdb-icon icon="star-o"> </mdb-icon>
            </div>
          </mdb-testimonial>
        </mdb-col>
      </mdb-row>
    </section>
  </mdb-container>
</template>

<script>
import { mdbContainer, mdbRow, mdbCol, mdbCard, mdbCardBody, mdbCardUp, mdbAvatar, mdbIcon, mdbTestimonial } from 'mdbvue';

export default {
  name: 'TestimonialsPage',
  components: {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardUp,
    mdbAvatar,
    mdbIcon,
    mdbTestimonial
  },
  data() {
    return {
    };
  }
};
</script>

<style scoped>
</style>
            

Testimonials v.4 MDB Pro component

Testimonials v.4


<template>
  <mdb-container>
    <section class="text-center my-5">
      <mdb-carousel :interval="8000" showControls showIndicators multi slide>
        <mdb-carousel-item>
          <mdb-row>
            <mdb-col md="4">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-half-full"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-o"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
          </mdb-row>
        </mdb-carousel-item>
        <mdb-carousel-item>
          <mdb-row>
            <mdb-col md="4">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-half-full"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-o"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
          </mdb-row>
        </mdb-carousel-item>
        <mdb-carousel-item>
          <mdb-row>
            <mdb-col md="4">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-half-full"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
            <mdb-col md="4" class="clearfix d-none d-md-block">
              <mdb-testimonial>
                <mdb-avatar class="mx-auto">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid"/>
                </mdb-avatar>
                <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"><mdb-icon icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis laboriosam.</p>
                <div class="grey-text">
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star"> </mdb-icon>
                  <mdb-icon icon="star-o"> </mdb-icon>
                </div>
              </mdb-testimonial>
            </mdb-col>
          </mdb-row>
        </mdb-carousel-item>
      </mdb-carousel>
    </section>
  </mdb-container>
</template>

<script>
import { mdbCarousel, mdbCarouselItem, mdbCarouselCaption, mdbContainer, mdbRow, mdbCol, mdbTestimonial, mdbAvatar, mdbIcon } from 'mdbvue';

export default {
  name: 'mdbCarouselPage',
  components: {
    mdbCarousel,
    mdbCarouselItem,
    mdbCarouselCaption,
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbTestimonial, 
    mdbAvatar,
    mdbIcon
  }
};
</script>

<style scoped>
</style>