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="section team-section pb-5">
        
        <!--Section heading-->
        <h2 class="h1 text-center py-5">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="card card-body">
                    <div class="avatar mt-3">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle" alt="First sample avatar image">
                    </div>
                    <h5 class="font-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-r">
                <div class="card card-body">
                    <div class="avatar mt-3">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle" alt="First sample avatar image">
                    </div>
                    <h5 class="font-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-r">
                <div class="card card-body">
                    <div class="avatar mt-3">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle" alt="First sample avatar image">
                    </div>
                    <h5 class="font-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-r">
                <div class="card card-body">
                    <div class="avatar mt-3">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle" alt="First sample avatar image">
                    </div>
                    <h5 class="font-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="section team-section pb-5">
        
        <!--Section heading-->
        <h2 class="h1 text-center py-5">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="rounded z-depth-1-half" alt="First sample avatar image">
                </div>
                <h4 class="font-bold dark-grey-text">
                    <strong>Maria Kate</strong>
                </h4>
                <h6 class="grey-text">Photographer</h6>

                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb ">
                    <i class="fa fa-facebook"></i>
                </a>
                <!--Dribbble-->
                <a type="button" class="btn-floating btn-small btn-dribbble ">
                    <i class="fa fa-dribbble"></i>
                </a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw ">
                    <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(27).jpg" class="rounded z-depth-1-half" alt="Second sample avatar image">
                </div>
                <h4 class="font-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-small btn-email ">
                    <i class="fa fa-envelope"></i>
                </a>
                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb ">
                    <i class="fa fa-facebook"></i>
                </a>
                <!--GitHub-->
                <a type="button" class="btn-floating btn-small btn-git ">
                    <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="rounded z-depth-1-half" alt="Third sample avatar image">
                </div>
                <h4 class="font-bold dark-grey-text">
                    <strong>Sarah Melyah</strong>
                </h4>
                <h6 class="grey-text">Web Developer</h6>

                <!--Linkedin-->
                <a type="button" class="btn-floating btn-small btn-li">
                    <i class="fa fa-linkedin "></i>
                </a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw">
                    <i class="fa fa-twitter "></i>
                </a>
                <!--Pinterest-->
                <a type="button" class="btn-floating btn-small 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="section team-section pb-4">
        
        <!--Section heading-->
        <h2 class="h1 text-center py-5">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="rounded 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(20).jpg" class="rounded 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(26).jpg" class="rounded 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(29).jpg" class="rounded 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-5">
        
    <!--Section heading-->
    <h2 class="text-center h1 py-5">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">

        <!--Rotating card-->
        <div class="card-wrapper">
        <div id="card-1" class="card-rotating effect__click">

            <!--Front Side-->
            <div class="face front">

            <!-- Image-->
            <div class="card-up">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/19.jpg" alt="Team member card image">
            </div>

            <!--Avatar-->
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg" class="rounded-circle img-responsive" alt="First sample avatar image">
            </div>

            <!--Content-->
            <div class="card-body">
                <h4 class="mt-1">Maria Kate</h4>
                <p class="font-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-->
            <h4 class="font-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="inline-ul list-unstyled">
                <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 grey-text" data-card="card-1">
                <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>

            </div>
            <!--Back Side-->

        </div>
        </div>
        <!--Rotating card-->

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

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

        <!--Rotating card-->
        <div class="card-wrapper">
        <div id="card-2" class="card-rotating effect__click">

            <!--Front Side-->
            <div class="face front">

            <!-- Image-->
            <div class="card-up">
                <img src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg." alt="Team member card image">
            </div>

            <!--Avatar-->
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" class="rounded-circle img-responsive" alt="Second sample avatar image">
            </div>

            <!--Content-->
            <div class="card-body">
                <h4 class="mt-1">Anna Deynah</h4>
                <p class="font-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-->
            <h4 class="font-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="inline-ul list-unstyled">
                <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 grey-text" data-card="card-2">
                <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>

            </div>
            <!--Back Side-->

        </div>
        </div>
        <!--Rotating card-->

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

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

        <!--Rotating card-->
        <div class="card-wrapper">
        <div id="card-3" class="card-rotating effect__click">

            <!--Front Side-->
            <div class="face front">

            <!-- Image-->
            <div class="card-up">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg" alt="Team member card image">
            </div>

            <!--Avatar-->
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="rounded-circle img-responsive" alt="Third sample avatar image">
            </div>

            <!--Content-->
            <div class="card-body">
                <h4 class="mt-1">John Doe</h4>
                <p class="font-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-->
            <h4 class="font-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="inline-ul list-unstyled">
                <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 grey-text" data-card="card-3">
                <i class="fa fa-repeat grey-text"></i> Click here to rotate back</a>

            </div>
            <!--Back Side-->

        </div>
        </div>
        <!--Rotating card-->

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

    </div>

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