web
mobile
Edit these docs Rate these docs

Testimonials section

Bootstrap testimonials section

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

Try our new Design Blocks - an impressive collection of 400+ HTML / CSS sections
Try new Design Blocks

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.



        <!-- Section: Testimonials v.1 -->
        <section class="text-center my-5 p-1">

          <!-- 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-->
              <div class="card testimonial-card">
                <!--Background color-->
                <div class="card-up info-color"></div>
                <!--Avatar-->
                <div class="avatar mx-auto white">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle img-fluid">
                </div>
                <div class="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>
                </div>
              </div>
              <!--Card-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
              <!--Card-->
              <div class="card 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>
                <div class="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>
                </div>
              </div>
              <!--Card-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6">
              <!--Card-->
              <div class="card 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>
                <div class="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>
                </div>
              </div>
              <!--Card-->
            </div>
            <!--Grid column-->

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

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

      

Testimonials v.2 MDB Pro component

Testimonials v.2



        <!-- 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>

          <div class="wrapper-carousel-fix">
            <!-- 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="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-alt blue-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="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>
                </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="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>
                </div>
                <!--Third slide-->
              </div>
              <!--Slides-->
              <!--Controls-->
              <a class="carousel-control-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-control-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>

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



        <!-- 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-alt"> </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

Testimonials v.4



        <!-- Section: Testimonials v.4 -->
        <section class="text-center my-5">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.4</h2>

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

            <!--Carousel Wrapper-->
            <div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item mb-5" 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="fas fa-chevron-left"></i></a>
                <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="next"><i class="fas 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 mx-auto">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).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"> </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-alt"> </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(27).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"> </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 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"> </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>
                <!--First slide-->

                <!--Second slide-->
                <div class="carousel-item">

                  <!--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(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"> </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-alt"> </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"> </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 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"> </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>
                <!--Second slide-->

                <!--Third slide-->
                <div class="carousel-item">

                  <!--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"> </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 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"> </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-alt"> </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"> </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>
                <!--Third slide-->

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

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

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

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

      
Edit these docs Rate these docs

Getting started: download & setup


Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 5,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

  • Community developed components & design projects
  • Technical support & community forum
  • CLI interface & free project hosting
  • Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!

Sign up now