Team sections

Bootstrap team sections

MDB provides you multiple sections and components to present your team.

Our amazing team

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 Williams

Graphic designer

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci sed quia non numquam modi tempora eius.

John Doe

Web developer

Sed ut perspiciatis unde omnis iste natus error sit voluptatem ipsa accusantium doloremque rem laudantium totam aperiam.

Maria Smith

Photographer

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim est fugiat nulla id eu laborum.

Tom Adams

Backend developer

Perspiciatis repellendus ad odit consequuntur, eveniet earum nisi qui consectetur totam officia voluptates perferendis voluptatibus aut.

HTML



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

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold my-5">Our amazing team</h2>
          <!-- Section description -->
          <p class="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-3 col-md-6 mb-lg-0 mb-5">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle z-depth-1"
                  alt="Sample avatar">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Anna Williams</h5>
              <p class="text-uppercase blue-text"><strong>Graphic designer</strong></p>
              <p class="grey-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
                adipisci sed quia non numquam modi tempora eius.</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook blue-text"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fa fa-twitter blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-instagram blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle z-depth-1"
                  alt="Sample avatar">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">John Doe</h5>
              <p class="text-uppercase blue-text"><strong>Web developer</strong></p>
              <p class="grey-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem ipsa accusantium
                doloremque rem laudantium totam aperiam.</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-instagram blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6 mb-md-0 mb-5">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle z-depth-1"
                  alt="Sample avatar">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Maria Smith</h5>
              <p class="text-uppercase blue-text"><strong>Photographer</strong></p>
              <p class="grey-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                mollit anim est fugiat nulla id eu laborum.</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-instagram blue-text"> </i>
                </a>
                <!-- Dribbble -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-dribbble blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-3 col-md-6">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1"
                  alt="Sample avatar">
              </div>
              <h5 class="font-weight-bold mt-4 mb-3">Tom Adams</h5>
              <p class="text-uppercase blue-text"><strong>Backend developer</strong></p>
              <p class="grey-text">Perspiciatis repellendus ad odit consequuntur, eveniet earum nisi qui consectetur
                totam officia voluptates perferendis voluptatibus aut.</p>
              <ul class="list-unstyled mb-0">
                <!-- Facebook -->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook blue-text"> </i>
                </a>
                <!-- Github -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-github blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

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

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

Our amazing team

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.

Maria Kate

Photographer

John Doe

Front-end Developer

Sarah Melyah

Web Developer

HTML



        <!-- Section: Team v.2 -->
        <section class="team-section text-center my-5">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold my-5">Our amazing team</h2>
          <!-- Section description -->
          <p class="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="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded z-depth-1-half" alt="Sample avatar">
              </div>
              <h4 class="font-weight-bold dark-grey-text my-4">Maria Kate</h4>
              <h6 class="text-uppercase grey-text mb-3"><strong>Photographer</strong></h6>
              <!-- Facebook-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb">
                <i class="fa fa-facebook"></i>
              </a>
              <!--Dribbble -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-dribbble">
                <i class="fa fa-dribbble"></i>
              </a>
              <!-- Twitter -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">
                <i class="fa fa-twitter"></i>
              </a>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-4 mb-md-0 mb-5">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded z-depth-1-half" alt="Sample avatar">
              </div>
              <h4 class="font-weight-bold dark-grey-text my-4">John Doe</h4>
              <h6 class="text-uppercase grey-text mb-3"><strong>Front-end Developer</strong></h6>
              <!--Email-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-email">
                <i class="fa fa-envelope"></i>
              </a>
              <!-- Facebook-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb">
                <i class="fa fa-facebook"></i>
              </a>
              <!-- GitHub-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-git">
                <i class="fa fa-github"></i>
              </a>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-4">
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded z-depth-1-half" alt="Sample avatar">
              </div>
              <h4 class="font-weight-bold dark-grey-text my-4">Sarah Melyah</h4>
              <h6 class="text-uppercase grey-text mb-3"><strong>Web Developer</strong></h6>
              <!--Linkedin -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-li">
                <i class="fa fa-linkedin "></i>
              </a>
              <!-- Twitter -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">
                <i class="fa fa-twitter "></i>
              </a>
              <!--Pinterest -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-pin">
                <i class="fa fa-pinterest "></i>
              </a>
            </div>
            <!-- Grid column -->

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

        </section>
        <!-- Section: Team v.2 -->

Our amazing team

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

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.

Maria Kate

Photographer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.

Anna Deynah

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.

Sarah Melyah

Front-end Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.

HTML



        <!-- Section: Team v.3 -->
        <section class="team-section my-5">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold text-center my-5">Our amazing team</h2>
          <!-- Section description -->
          <p class="grey-text text-center 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 text-md-left">

            <!-- Grid column -->
            <div class="col-xl-6 col-lg-12 mb-5 d-md-flex justify-content-between">
              <div class="avatar mb-md-0 mb-4 mx-4">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
              </div>
              <div class="mx-4">
                <h4 class="font-weight-bold mb-3">John Doe</h4>
                <h6 class="font-weight-bold grey-text mb-3">Web Designer</h6>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic
                  tenetur.</p>
                <!-- Facebook-->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fa fa-twitter"> </i>
                </a>
                <!--Dribbble -->
                <a class="p-2 fa-lg dribbble-ic">
                  <i class="fa fa-dribbble"> </i>
                </a>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-xl-6 col-lg-12 mb-5 d-md-flex justify-content-between">
              <div class="avatar mb-md-0 mb-4 mx-4">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded z-depth-1" alt="Sample avatar">
              </div>
              <div class="mx-4">
                <h4 class="font-weight-bold mb-3">Maria Kate</h4>
                <h6 class="font-weight-bold grey-text mb-3">Photographer</h6>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic
                  tenetur.</p>
                <!-- Facebook-->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook"> </i>
                </a>
                <!--YouTube -->
                <a class="p-2 fa-lg yt-ic">
                  <i class="fa fa-youtube"> </i>
                </a>
                <!--Instagram-->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-instagram"> </i>
                </a>
              </div>
            </div>
            <!-- Grid column -->

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

          <!-- Grid row-->
          <div class="row text-center text-md-left">

            <!-- Grid column -->
            <div class="col-xl-6 col-lg-12 mb-xl-0 mb-5 d-md-flex justify-content-between">
              <div class="avatar mb-md-0 mb-4 mx-4">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="rounded z-depth-1" alt="Sample avatar">
              </div>
              <div class="mx-4">
                <h4 class="font-weight-bold mb-3">Anna Deynah</h4>
                <h6 class="font-weight-bold grey-text mb-3">Web Developer</h6>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic
                  tenetur.</p>
                <!-- Facebook-->
                <a class="p-2 fa-lg fb-ic">
                  <i class="fa fa-facebook"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fa fa-twitter"> </i>
                </a>
                <!-- GitHub-->
                <a class="p-2 fa-lg git-ic">
                  <i class="fa fa-github"> </i>
                </a>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-xl-6 col-lg-12 d-md-flex justify-content-between">
              <div class="avatar mb-md-0 mb-4 mx-4">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" class="rounded z-depth-1 img-fluid"
                  alt="Sample avatar">
              </div>
              <div class="mx-4">
                <h4 class="font-weight-bold mb-3">Sarah Melyah</h4>
                <h6 class="font-weight-bold grey-text mb-3">Front-end Developer</h6>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic
                  tenetur.</p>
                <!-- Google +-->
                <a class="p-2 fa-lg gplus-ic">
                  <i class="fa fa-google-plus"> </i>
                </a>
                <!--LinkedIn -->
                <a class="p-2 fa-lg li-ic">
                  <i class="fa fa-linkedin"> </i>
                </a>
                <!--Email-->
                <a class="p-2 fa-lg email-ic">
                  <i class="fa fa-envelope"> </i>
                </a>
              </div>
            </div>
            <!-- Grid column -->

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

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

Our amazing team

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.

Maria Kate

Photographer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?

Click here to rotate back

Anna Deynah

Web Designer

Click here to rotate

About me

Click here to rotate back

John Doe

Front-end Developer

Click here to rotate

About me

Click here to rotate back

HTML



        <!-- Section: Team v.4 -->
        <section class="my-5">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold text-center my-5">Our amazing team</h2>
          <!-- Section description -->
          <p class="grey-text text-center 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">

              <!-- Rotating card -->
              <div class="card-wrapper">
                <div id="card-1" class="card card-rotating text-center">
                  <!-- Front Side -->
                  <div class="face front">
                    <!-- Image -->
                    <div class="card-up">
                      <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="Team member card image">
                    </div>
                    <!-- Avatar -->
                    <div class="avatar mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img(10).jpg" class="rounded-circle img-fluid"
                        alt="First sample avatar image">
                    </div>
                    <!-- Content -->
                    <div class="card-body">
                      <h4 class="font-weight-bold mt-1 mb-3">Maria Kate</h4>
                      <p class="font-weight-bold dark-grey-text">Photographer</p>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-1">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
                    </div>
                  </div>
                  <!-- Front Side -->
                  <!-- Back Side -->
                  <div class="face back">
                    <!-- Content -->
                    <div class="card-body">
                      <!-- Content -->
                      <h4 class="font-weight-bold mt-4 mb-2">
                        <strong>About me</strong>
                      </h4>
                      <hr>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
                        Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,
                        voluptatum eum, officia laudantium quaerat?
                      </p>
                      <hr>
                      <!-- Social Icons -->
                      <ul class="list-inline list-unstyled">
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg fb-ic">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fa fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fa fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fa fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-1">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>
                    </div>
                  </div>
                  <!-- Back Side -->
                </div>
              </div>
              <!-- Rotating card -->

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

            <!-- Grid column -->
            <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
              <!-- Rotating card -->
              <div class="card-wrapper">
                <div id="card-2" class="card card-rotating text-center">
                  <!-- Front Side -->
                  <div class="face front">
                    <!-- Image -->
                    <div class="card-up">
                      <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg" alt="Team member card image">
                    </div>
                    <!-- Avatar -->
                    <div class="avatar mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img(20).jpg" class="rounded-circle" alt="Second sample avatar image">
                    </div>
                    <!-- Content -->
                    <div class="card-body">
                      <h4 class="font-weight-bold mt-1 mb-3">Anna Deynah</h4>
                      <p class="font-weight-bold dark-grey-text">Web Designer</p>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-2">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
                    </div>
                  </div>
                  <!-- Front Side -->
                  <!-- Back Side -->
                  <div class="face back">
                    <!-- Content -->
                    <div class="card-body">
                      <!-- Content -->
                      <h4 class="font-weight-bold mt-4 mb-2">
                        <strong>About me</strong>
                      </h4>
                      <hr>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
                        Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,
                        voluptatum eum, officia laudantium quaerat?
                      </p>
                      <hr>
                      <!-- Social Icons -->
                      <ul class="list-inline list-unstyled">
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg fb-ic">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fa fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fa fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fa fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-2">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>
                    </div>
                  </div>
                  <!-- Back Side -->
                </div>
              </div>
              <!-- Rotating card -->
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-lg-4 col-md-12">
              <!-- Rotating card -->
              <div class="card-wrapper">
                <div id="card-3" class="card card-rotating text-center">
                  <!-- Front Side -->
                  <div class="face front">
                    <!-- Image -->
                    <div class="card-up">
                      <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"
                        alt="Team member card image">
                    </div>
                    <!-- Avatar -->
                    <div class="avatar mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img(8).jpg" class="rounded-circle img-fluid"
                        alt="Third sample avatar image">
                    </div>
                    <!-- Content -->
                    <div class="card-body">
                      <h4 class="font-weight-bold mt-1 mb-3">John Doe</h4>
                      <p class="font-weight-bold dark-grey-text">Front-end Developer</p>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-3">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate</a>
                    </div>
                  </div>
                  <!-- Front Side -->
                  <!-- Back Side -->
                  <div class="face back">
                    <!-- Content -->
                    <div class="card-body">
                      <!-- Content -->
                      <h4 class="font-weight-bold mt-4 mb-2">
                        <strong>About me</strong>
                      </h4>
                      <hr>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
                        Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus,
                        voluptatum eum, officia laudantium quaerat?
                      </p>
                      <hr>
                      <!-- Social Icons -->
                      <ul class="list-inline list-unstyled">
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg fb-ic">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fa fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fa fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fa fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-3">
                        <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>
                    </div>
                  </div>
                  <!-- Back Side -->
                </div>
              </div>
              <!-- Rotating card -->
            </div>
            <!-- Grid column -->

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

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

Getting started : download & setup

Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

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

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Team sections

Bootstrap team sections

Team v.1 MDB Pro component

Our amazing team

Anna Williams

John Doe

Maria Smith

Tom Adams

Team v.2 MDB Pro component

Our amazing team

Maria Kate

Photographer

John Doe

Front-end Developer

Sarah Melyah

Web Developer

Team v.3 MDB Pro component

Our amazing team

John Doe

Web Designer

Maria Kate

Photographer

Anna Deynah

Web Developer

Sarah Melyah

Front-end Developer

Team v.4 MDB Pro component

Our amazing team

Maria Kate

About me

Anna Deynah

About me

John Doe

About me

Getting started : download & setup

Download

MDB Pro

Tutorials

Compilation

Compilation & Customization tutorial

Integrations with Angular, React or Vue