Testimonials and streak


MDB Pro required

This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.

Get MDB PRO

Step 1 - testimonials

Go to the Testimonials Docs and copy the code for Testimonials v.2.

Next, place it inside <!--Section: testimonials-->, below the heading.

Note: Don't copy <section> tags and the heading because we already did it.

It should look like this:



        <!--Section: testimonials-->
        <section id="testimonials" class="text-center py-5" style="background-color: #eee;">

            <!-- Container -->
            <div class="container">

                <!-- Section heading -->
                <h2 class="h1-responsive font-weight-bold mb-5">Testimonials</h2>

                <!-- 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 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 amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star-half-full amber-text"> </i>
                            </div>
                        </div>
                        <!--First slide-->
                        <!--Second slide-->
                        <div class="carousel-item">
                            <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 amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                            </div>
                        </div>
                        <!--Second slide-->
                        <!--Third slide-->
                        <div class="carousel-item">
                            <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 amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star amber-text"> </i>
                                <i class="fa fa-star-o amber-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 -->

            </div>
            <!-- Container -->

        </section>
        <!--Section: testimonials-->

    

If you want you can change the color of the rating stars. Replace .blue-text class with .amber-text class (or whatever color you like).

This section is based on Carousel component. If you want to learn more about Carousels - read our Carousel Docs

To see all available sections - have a look at our Sections Demo.

Step 2 - streak

Go to the Plugin & Addons / Streak Docs and copy the code for Streak with photo.

Next, place it inside <!--Section: call to action--> comments.



        <!--Section: call to action-->
        <div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
          <div class="flex-center white-text rgba-black-light pattern-1">
              <ul class="mb-0 list-unstyled">
                  <li>
                      <h2 class="h2-responsive"><i class="fa fa-quote-left" aria-hidden="true"></i> The people who
                          are
                          crazy enough to think they can change the world are the ones who do. <i class="fa fa-quote-right"
                              aria-hidden="true"></i></h2>
                  </li>
                  <li class="mb-0">
                      <h5 class="text-center font-italic mb-0">~ Steve Jobs</h5>
                  </li>
              </ul>
          </div>
      </div>
      <!--Section: call to action-->

    

If you want, you can change the background image of the streak. To do it, replace the URL of the current image with the photo you like.



        <div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">

    

Step 3 - mask and button

We will replace this quote from Steve Jobs with a call to action button.



      <!--Section: call to action-->
      <div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
        <div class="flex-center rgba-black-light pattern-1">
            <div class="white-text smooth-scroll mx-4">
                <h2 class="h2-responsive mb-5 wow fadeIn">If you have any legal problem in your life ... We are
                    available</h2>
                <div class="text-center">
                    <a href="#contact" class="btn btn-outline-white wow fadeIn " data-offset="100" data-wow-delay="0.2s">Contact
                        us</a>
                </div>
            </div>
        </div>
    </div>
    <!--Section: call to action-->

    

Did you notice .pattern-1 class? It provides a mask with special dotted background.

You can use one of nine predefined patterns:

  • pattern-1
  • pattern-2
  • pattern-3
  • pattern-4
  • pattern-5
  • pattern-6
  • pattern-7
  • pattern-8
  • pattern-9

Choose the one you like and save the file.

To learn more about masks read our Masks Docs.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits