Bootstrap team sections

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 Williams

Graphic designer

First sample avatar image
John Doe

Web developer

First sample avatar image
Maria Smith

Photographer

First sample avatar image
Tom Adams

Backend developer

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

    <!--Section heading-->
    <h2 class="h1 text-center py-5">Our amazing team</h2>
    <!--Section description-->
    <p class="grey-text pb-5 text-center">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-4">
            <div class="card card-body">
                <div class="avatar mx-auto my-3">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
                </div>
                <h5 class="font-weight-bold">
                    <strong>Anna Williams</strong>
                </h5>
                <p class="grey-text">Graphic designer</p>

                <ul class="list-unstyled">
                    <!-- Facebook -->
                    <a class="icons-sm fb-ic">
                        <i class="fa fa-facebook blue-text"> </i>
                    </a>
                    <!-- Twitter -->
                    <a class="icons-sm tw-ic">
                        <i class="fa fa-twitter blue-text"> </i>
                    </a>
                    <!-- Instagram -->
                    <a class="icons-sm ins-ic">
                        <i class="fa fa-instagram blue-text"> </i>
                    </a>
                </ul>
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card card-body">
                <div class="avatar mx-auto my-3">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
                </div>
                <h5 class="font-weight-bold">
                    <strong>John Doe</strong>
                </h5>
                <p class="grey-text">Web developer</p>

                <ul class="list-unstyled">
                    <!-- Facebook -->
                    <a class="icons-sm fb-ic">
                        <i class="fa fa-facebook blue-text"> </i>
                    </a>
                    <!-- Instagram -->
                    <a class="icons-sm ins-ic">
                        <i class="fa fa-instagram blue-text"> </i>
                    </a>
                </ul>
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card card-body">
                <div class="avatar mx-auto my-3">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
                </div>
                <h5 class="font-weight-bold">
                    <strong>Maria Smith</strong>
                </h5>
                <p class="grey-text">Photographer</p>

                <ul class="list-unstyled">
                    <!-- Facebook -->
                    <a class="icons-sm fb-ic">
                        <i class="fa fa-facebook blue-text"> </i>
                    </a>
                    <!-- Instagram -->
                    <a class="icons-sm ins-ic">
                        <i class="fa fa-instagram blue-text"> </i>
                    </a>
                    <!-- Dribbble -->
                    <a class="icons-sm ins-ic">
                        <i class="fa fa-dribbble blue-text"> </i>
                    </a>
                </ul>
            </div>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card card-body">
                <div class="avatar mx-auto my-3">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle img-fluid" alt="First sample avatar image">
                </div>
                <h5 class="font-weight-bold">
                    <strong>Tom Adams</strong>
                </h5>

                <p class="grey-text">Backend developer</p>

                <ul class="list-unstyled">
                    <!-- Facebook -->
                    <a class="icons-sm fb-ic">
                        <i class="fa fa-facebook blue-text"> </i>
                    </a>
                    <!-- Github -->
                    <a class="icons-sm ins-ic">
                        <i class="fa fa-github blue-text"> </i>
                    </a>
                </ul>
            </div>
        </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="team-section pb-5">

    <!--Section heading-->
    <h2 class="h1 text-center py-5">Our amazing team</h2>
    <!--Section description-->
    <p class="grey-text pb-5 text-center">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-4">

            <div class="avatar mx-auto my-3" style="max-width: 150px;">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded img-fluid z-depth-1-half" alt="First sample avatar image">
            </div>
            <h4 class="font-weight-bold dark-grey-text">
                <strong>Maria Kate</strong>
            </h4>
            <h6 class="grey-text">Photographer</h6>

            <!--Facebook-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-fb ">
                <i class="fa fa-facebook"></i>
            </a>
            <!--Dribbble-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-dribbble ">
                <i class="fa fa-dribbble"></i>
            </a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-tw ">
                <i class="fa fa-twitter"></i>
            </a>

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

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

            <div class="avatar mx-auto my-3" style="max-width: 150px;">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded img-fluid z-depth-1-half" alt="Second sample avatar image">
            </div>
            <h4 class="font-weight-bold dark-grey-text">
                <strong>John Doe</strong>
            </h4>
            <h6 class="grey-text">Front-end Developer</h6>

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

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

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

            <div class="avatar mx-auto my-3" style="max-width: 150px;">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded img-fluid z-depth-1-half" alt="Third sample avatar image">
            </div>
            <h4 class="font-weight-bold dark-grey-text">
                <strong>Sarah Melyah</strong>
            </h4>
            <h6 class="grey-text">Web Developer</h6>

            <!--Linkedin-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-li">
                <i class="fa fa-linkedin "></i>
            </a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-tw">
                <i class="fa fa-twitter "></i>
            </a>
            <!--Pinterest-->
            <a type="button" class="btn-floating btn-sm mx-1  btn-pin">
                <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="team-section pb-4">

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

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

            <div class="col-md-6 float-left">
                <div class="avatar mx-auto">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded img-fluid 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-weight-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-4">

            <div class="col-md-6 float-left">
                <div class="avatar mx-auto">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded img-fluid 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-weight-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 text-center text-md-left">

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

            <div class="col-md-6 float-left">
                <div class="avatar mx-auto">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg" class="rounded img-fluid 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-weight-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-4">
            <div class="col-md-6 float-left">
                <div class="avatar mx-auto">
                    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(29).jpg" class="rounded img-fluid 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-weight-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="h1 pt-4">Our amazing team</h2>
    <!--Section description-->
    <p class="">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">

            <mdb-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-body">
                        <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="list-inline list-unstyled">
                        <li class="list-inline-item">
                            <a class="icons-sm fb-ic">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm pin-ic">
                                <i class="fa fa-pinterest"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm ins-ic">
                                <i class="fa fa-instagram"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <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-->
            </mdb-card-rotating>

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

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

            <mdb-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-body">
                        <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="list-inline list-unstyled">
                        <li class="list-inline-item">
                            <a class="icons-sm fb-ic">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm tw-ic">
                                <i class="fa fa-twitter"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm gplus-ic">
                                <i class="fa fa-google-plus"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <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-->
            </mdb-card-rotating>

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

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

            <mdb-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-body">
                        <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="list-inline list-unstyled">
                        <li class="list-inline-item">
                            <a class="icons-sm gplus-ic">
                                <i class="fa fa-google-plus"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm fb-ic">
                                <i class="fa fa-facebook"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a class="icons-sm git-ic">
                                <i class="fa fa-github"></i>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <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-->
            </mdb-card-rotating>

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

    </div>

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