Bootstrap team section

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

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 accusamus veniam.

First sample avatar image

Anna Deynah

Web Designer

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

Second sample avatar image

John Doe

Web Developer

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

Third sample avatar image

Maria Kate

Photographer

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

Fourth sample avatar image

Tom Williams

Front-end Developer

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


<section class="section team-section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Our amazing team</h2>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

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

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1" alt="First sample avatar image">
            </div>
            <h4>Anna Deynah</h4>
            <h6 class="font-bold blue-text">Web Designer</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
            <!--Twitter-->
            <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
            <!--Instagram-->
            <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>

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

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1" alt="Second sample avatar image">
            </div>
            <h4>John Doe</h4>
            <h6 class="font-bold blue-text">Web Developer</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

            <!--Linkedin-->
            <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
            <!--Dribbble-->
            <a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"> </i></a>
            
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle z-depth-1" alt="Third sample avatar image">
            </div>
            <h4>Maria Kate</h4>
            <h6 class="font-bold blue-text">Photographer</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
            <!--Pinterest-->
            <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
            <!--Email-->
           <a class="icons-sm email-ic"><i class="fa fa-envelope-o"> </i></a>

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

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1" alt="Fourth sample avatar image">
            </div>
            <h4>Tom Williams</h4>
            <h6 class="font-bold blue-text">Front-end Developer</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

            <!--Google +-->
            <a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
            <!--GitHub-->
            <a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>

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

First sample avatar image

Maria Kate

Photographer
Second sample avatar image

John Doe

Front-end Developer
Third sample avatar image

Sarah Melyah

Web Developer

<!--Section: Team v.2-->
<section class="section team-section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Our amazing team</h2>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

    <div class="row text-center">

        <!--Grid column-->
        <div class="col-md-4 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="z-depth-1" alt="First sample avatar image">
            </div>
            <h4>Maria Kate</h4>
            <h5>Photographer</h5>

            <!--Facebook-->
            <a type="button" class="btn-floating btn-small btn-fb" ripple-radius><i class="fa fa-facebook"></i></a>
            <!--Dribbble-->
            <a type="button" class="btn-floating btn-small btn-dribbble" ripple-radius><i class="fa fa-dribbble"></i></a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-small btn-tw" ripple-radius><i class="fa fa-twitter"></i></a>

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

        <!--Grid column-->
        <div class="col-md-4 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="z-depth-1" alt="Second sample avatar image">
            </div>
            <h4>John Doe</h4>
            <h5>Front-end Developer</h5>

            <!--Email-->
            <a type="button" class="btn-floating btn-small btn-email" ripple-radius><i class="fa fa-envelope"></i></a>
            <!--Facebook-->
            <a type="button" class="btn-floating btn-small btn-fb" ripple-radius><i class="fa fa-facebook"></i></a>
            <!--GitHub-->
            <a type="button" class="btn-floating btn-small btn-git" ripple-radius><i class="fa fa-github"></i></a>

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

        <!--Grid column-->
        <div class="col-md-4 mb-r">

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="z-depth-1" alt="Third sample avatar image">
            </div>
            <h4>Sarah Melyah</h4>
            <h5>Web Developer</h5>

            <!--Linkedin-->
            <a type="button" class="btn-floating btn-small btn-li" ripple-radius><i class="fa fa-linkedin "></i></a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-small btn-tw" ripple-radius><i class="fa fa-twitter "></i></a>
            <!--Pinterest-->
            <a type="button" class="btn-floating btn-small btn-pin" ripple-radius><i class="fa fa-pinterest "></i></a>

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

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

First sample avatar image

John Doe

Web Designer

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

Second sample avatar image

Maria Kate

Photographer

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

Fourth sample avatar image

Anna Deynah

Web Developer

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

Fifth sample avatar image

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="section team-section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Our amazing team</h2>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

    <!--Grid row-->
    <div class="row mb-lg-4 center-on-small-only">

        <!--Grid column-->
        <div class="col-lg-6 col-md-12 mb-r">

            <div class="col-md-6 float-left">
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="z-depth-1" alt="First sample avatar image">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4><strong>John Doe</strong></h4>
                <h6 class="font-bold grey-text mb-4">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="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"> </i></a>
            </div>

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

        <!--Grid column-->
        <div class="col-lg-6 col-md-12 mb-r">

            <div class="col-md-6 float-left">
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(19).jpg" class="z-depth-1" alt="Second sample avatar image">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4><strong>Maria Kate</strong></h4>
               <h6 class="font-bold grey-text mb-4">Photographer</h6>
                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>

                <!--Facebook-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                <!--YouTube-->
                <a class="icons-sm yt-ic"><i class="fa fa-youtube"> </i></a>
                <!--Instagram-->
                <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
            </div>

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

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

    <!--Grid row-->
    <div class="row center-on-small-only">

        <!--Grid column-->
        <div class="col-lg-6 col-md-12 mb-r">

            <div class="col-md-6 float-left">
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="z-depth-1" alt="Fourth sample avatar image">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4><strong>Anna Deynah</strong></h4>
                <h6 class="font-bold grey-text mb-4">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="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
               <!--GitHub-->
                <a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>
            </div>

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

        <!--Grid column-->
        <div class="col-lg-6 col-md-12 mb-r">
            <div class="col-md-6 float-left">
                <div class="avatar">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(33).jpg" class="z-depth-1" alt="Fifth sample avatar image">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4><strong>Sarah Melyah</strong></h4>
               <h6 class="font-bold grey-text mb-4">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="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
                <!--LinkedIn-->
                <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
                <!--Email-->
                <a class="icons-sm email-ic"><i class="fa 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 accusamus 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="section pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Our amazing team</h2>
    <!--Section description-->
    <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <card-rotating #cards1>
                <!--Front Side-->
                <div class="face front tp-box_side tp-box_front">

                    <!-- Image-->
                    <div class="card-up">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid">
                    </div>
                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="rounded-circle img-responsive">
                    </div>
                    <!--Content-->
                    <div class="card-block">
                        <h4>Maria Kate</h4>
                        <p>Photographer</p>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1" (click)="cards1.toggle()"><i class="fa fa-repeat"></i> Click here to rotate</a>
                    </div>
                </div>
                <!--/.Front Side-->

                <!--Back Side-->
                <div class="back tp-box_side tp-box_back">

                    <!--Content-->
                    <h4>About me</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="inline-ul">
                        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                        <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"></i></a></li>
                        <li><a class="icons-sm ins-ic"><i class="fa fa-instagram"></i></a></li>
                        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                    </ul>
                    <!--Triggering button-->
                    <a class="rotate-btn" data-card="card-1" (click)="cards1.toggle()"><i class="fa fa-undo"></i> Click here to rotate back</a>

                </div>
                <!--/.Back Side-->
            </card-rotating>

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

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">

            <card-rotating #cards2>
                <!--Front Side-->
                <div class="face front tp-box_side tp-box_front">

                    <!-- Image-->
                    <div class="card-up">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" class="img-fluid">
                    </div>
                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" class="rounded-circle img-responsive">
                    </div>
                    <!--Content-->
                    <div class="card-block">
                        <h4>Anna Deynah</h4>
                        <p>Web Designer</p>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1" (click)="cards2.toggle()"><i class="fa fa-repeat"></i> Click here to rotate</a>
                    </div>
                </div>
                <!--/.Front Side-->

                <!--Back Side-->
                <div class="back tp-box_side tp-box_back">

                    <!--Content-->
                    <h4>About me</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="inline-ul">
                        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                        <li><a class="icons-sm dribbble-ic"><i class="fa fa-dribbble"></i></a></li>
                    </ul>
                    <!--Triggering button-->
                    <a class="rotate-btn" data-card="card-1" (click)="cards2.toggle()"><i class="fa fa-undo"></i> Click here to rotate back</a>

                </div>
                <!--/.Back Side-->
            </card-rotating>

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

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">
        
            <card-rotating #cards3>
                <!--Front Side-->
                <div class="face front tp-box_side tp-box_front">

                    <!-- Image-->
                    <div class="card-up">
                        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg" class="img-fluid">
                    </div>
                    <!--Avatar-->
                    <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="rounded-circle img-responsive">
                    </div>
                    <!--Content-->
                    <div class="card-block">
                        <h4>John Doe</h4>
                        <p>Front-end Developer</p>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1" (click)="cards3.toggle()"><i class="fa fa-repeat"></i> Click here to rotate</a>
                    </div>
                </div>
                <!--/.Front Side-->

                <!--Back Side-->
                <div class="back tp-box_side tp-box_back">

                    <!--Content-->
                    <h4>About me</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="inline-ul">
                        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                        <li><a class="icons-sm git-ic"><i class="fa fa-github"></i></a></li>
                        <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                    <!--Triggering button-->
                    <a class="rotate-btn" data-card="card-1" (click)="cards3.toggle()"><i class="fa fa-undo"></i> Click here to rotate back</a>

                </div>
                <!--/.Back Side-->
            </card-rotating>

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

    </div>

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