web
mobile
Edit these docs Rate these docs

Team sections

Bootstrap team sections

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

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

Team v.1 MDB Pro component

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.

Sample avatar
Anna Williams

Graphic designer

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

Sample avatar
John Doe

Web developer

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

Sample avatar
Maria Smith

Photographer

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

Sample avatar
Tom Adams

Backend developer

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



        <!-- 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="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fab fa-twitter blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab 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="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab 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="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Instagram -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-instagram blue-text"> </i>
                </a>
                <!-- Dribbble -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab 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="fab fa-facebook-f blue-text"> </i>
                </a>
                <!-- Github -->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab fa-github blue-text"> </i>
                </a>
              </ul>
            </div>
            <!-- Grid column -->

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

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

      

Team v.2 MDB Pro component

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.

Sample avatar

Maria Kate

Photographer
Sample avatar

John Doe

Front-end Developer
Sample avatar

Sarah Melyah

Web Developer


        <!-- 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="fab fa-facebook-f"></i>
              </a>
              <!--Dribbble -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-dribbble">
                <i class="fab fa-dribbble"></i>
              </a>
              <!-- Twitter -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">
                <i class="fab 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="fas fa-envelope"></i>
              </a>
              <!-- Facebook-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb">
                <i class="fab fa-facebook-f"></i>
              </a>
              <!-- GitHub-->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-git">
                <i class="fab 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="fab fa-linkedin-in "></i>
              </a>
              <!-- Twitter -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">
                <i class="fab fa-twitter "></i>
              </a>
              <!--Pinterest -->
              <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-pin">
                <i class="fab fa-pinterest "></i>
              </a>
            </div>
            <!-- Grid column -->

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

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

      

Team v.3 MDB Pro component

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.

Sample avatar

John Doe

Web Designer

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

Sample avatar

Maria Kate

Photographer

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

Sample avatar

Anna Deynah

Web Developer

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

Sample avatar

Sarah Melyah

Front-end Developer

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



        <!-- 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="fab fa-facebook-f"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fab fa-twitter"> </i>
                </a>
                <!--Dribbble -->
                <a class="p-2 fa-lg dribbble-ic">
                  <i class="fab 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="fab fa-facebook-f"> </i>
                </a>
                <!--YouTube -->
                <a class="p-2 fa-lg yt-ic">
                  <i class="fab fa-youtube"> </i>
                </a>
                <!--Instagram-->
                <a class="p-2 fa-lg ins-ic">
                  <i class="fab 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="fab fa-facebook-f"> </i>
                </a>
                <!-- Twitter -->
                <a class="p-2 fa-lg tw-ic">
                  <i class="fab fa-twitter"> </i>
                </a>
                <!-- GitHub-->
                <a class="p-2 fa-lg git-ic">
                  <i class="fab 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="fab fa-google-plus-g"> </i>
                </a>
                <!--LinkedIn -->
                <a class="p-2 fa-lg li-ic">
                  <i class="fab fa-linkedin-in"> </i>
                </a>
                <!--Email-->
                <a class="p-2 fa-lg email-ic">
                  <i class="fas fa-envelope"> </i>
                </a>
              </div>
            </div>
            <!-- Grid column -->

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

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


      

Team v.4 MDB Pro component

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.

Team member card image
First sample avatar image

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
Team member card image
Second sample avatar image

Anna Deynah

Web Designer

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
Team member card image
Third sample avatar image

John Doe

Front-end Developer

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


        <!-- 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="fas fa-redo-alt 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="fab fa-facebook-f"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fab fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fab fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fab fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-1">
                        <i class="fas fa-redo-alt 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="fas fa-redo-alt 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="fab fa-facebook-f"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fab fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fab fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fab fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-2">
                        <i class="fas fa-redo-alt 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="fas fa-redo-alt 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="fab fa-facebook-f"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg pin-ic">
                            <i class="fab fa-pinterest"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg ins-ic">
                            <i class="fab fa-instagram"> </i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a class="p-2 fa-lg tw-ic">
                            <i class="fab fa-twitter"> </i>
                          </a>
                        </li>
                      </ul>
                      <!-- Triggering button -->
                      <a class="rotate-btn grey-text" data-card="card-3">
                        <i class="fas fa-redo-alt 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 -->

      
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