Bootstrap team sections

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

Team section v.1 Premium 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 quae quaerat ad velit ab.

Second sample avatar image

John Doe

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.

Third sample avatar image

Maria Kate

Photographer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.

Fourth sample avatar image

Sarah Melyah

Front-end Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.


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

    <!--Section heading-->
    <h1 class="section-heading">Our amazing team</h1>
    <!--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>

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

        <!--First 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">
            </div>
            <h4>Anna Deynah</h4>
            <h5>Web Designer</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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 drib-ic"><i class="fa fa-dribbble"> </i></a>

        </div>
        <!--/First column-->

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

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle">
            </div>
            <h4>John Doe</h4>
            <h5>Web Developer</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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>
            <!--GitHub-->
            <a class="icons-sm git-ic"><i class="fa fa-github"> </i></a>

        </div>
        <!--/Second column-->

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

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg" class="rounded-circle">
            </div>

            <h4>Maria Kate</h4>
            <h5>Photographer</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
            <!--Pinterest-->
            <a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
            <!--Instagram-->
            <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>

        </div>
        <!--/Third column-->

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

            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" class="rounded-circle">
            </div>
            <h4>Sarah Melyah</h4>
            <h5>Front-end Developer</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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>
        <!--/Fourth column-->

    </div>
    <!--/First row-->

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

Team section v.2 Premium 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

Sarah Melyah

Front-end Developer
Third sample avatar image

John Doe

Web Developer

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

    <!--Section heading-->
    <h1 class="section-heading ">Our amazing team v.2</h1>
    <!--Section sescription-->
    <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">

        <!--First column-->
        <div class="col-md-4 mb-r">
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).jpg">
            </div>
            <h4>Maria Kate</h4>
            <h5>Photographer</h5>

            <!--Facebook-->
            <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
            <!--Pinterest-->
            <a type="button" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"></i></a>
            <!--Instagram-->
            <a type="button" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"></i></a>

        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-4 mb-r">
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg">
            </div>
            <h4>Sarah Melyah</h4>
            <h5>Front-end Developer</h5>

            <!--Google +-->
            <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></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>
        <!--/Second column-->

        <!--Third column-->
        <div class="col-md-4 mb-r">
            <div class="avatar">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg">
            </div>
            <h4>John Doe</h4>
            <h5>Web Developer</h5>

            <!--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>
            <!--Dribbble-->
            <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>

        </div>
        <!--/Third column-->
    </div>

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

Team section v.3 Premium 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 Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.

Second sample avatar image

Maria Kate

Photographer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.

Fourth sample avatar image

Anna Deynah

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.

Fifth sample avatar image

Sarah Melyah

Front-end Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.


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

    <!--Section heading-->
    <h1 class="section-heading">Our amazing team</h1>
    <!--Section sescription-->
    <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>

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

        <!--First 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(9).jpg">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4>John Doe</h4>
                <h5>Web Developer</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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>
        <!--/First column-->

        <!--Second 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(10).jpg">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4>Maria Kate</h4>
                <h5>Photographer</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</p>

                <!--Facebook-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
                <!--Pinterest-->
                <a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a>
                <!--Instagram-->
                <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>
            </div>

        </div>
        <!--/Second column-->

    </div>
    <!--/First row-->

    <div style="height:50px" class="hidden-md-down"></div>

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

        <!--Third 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(11).jpg">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4>Anna Deynah</h4>
                <h5>Web Designer</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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 drib-ic"><i class="fa fa-dribbble"> </i></a>
            </div>


        </div>
        <!--/Third column-->

        <!--Fourth 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(1).jpg">
                </div>
            </div>

            <div class="col-md-6 float-right">
                <h4>Sarah Melyah</h4>
                <h5>Front-end Developer</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.</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>

        </div>
        <!--/Fourth column-->
    </div>
    <!--/Second row-->

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

Team section v.4 Premium 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 Team member card 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 Team member card 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 Team member card image

Sarah Melyah

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">

    <!--Section heading-->
    <h1 class="section-heading">Our amazing team</h1>
    <!--Section sescription-->
    <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>
    <br>

    <div class="row">

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

            <!--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/Horizontal/Nature/4-col/img%20(55).jpg">
                        </div>
                        <!--Avatar-->
                        <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-12.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"><i class="fa fa-repeat"></i> Click here to rotate</a>
                        </div>
                    </div>
                    <!--/.Front Side-->

                    <!--Back Side-->
                    <div class="face 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"><i class="fa fa-undo"></i> Click here to rotate back</a>

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

                </div>
            </div>
            <!--/.Rotating card-->
        </div>
        <!--/First column-->


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

            <!--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/Horizontal/Nature/4-col/img%20(64).jpg">
                        </div>
                        <!--Avatar-->
                        <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.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-2"><i class="fa fa-repeat"></i> Click here to rotate</a>
                        </div>
                    </div>
                    <!--/.Front Side-->

                    <!--Back Side-->
                    <div class="face 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 drib-ic"><i class="fa fa-dribbble"> </i></a></li>
                        </ul>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-2"><i class="fa fa-undo"></i> Click here to rotate back</a>

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

                </div>
            </div>
            <!--/.Rotating card-->
        </div>
        <!--/Second column-->


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

            <!--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(68).jpg">
                        </div>
                        <!--Avatar-->
                        <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg" class="rounded-circle img-responsive">
                        </div>
                        <!--Content-->
                        <div class="card-block">
                            <h4>Sarah Melyah</h4>
                            <p>Front-end Developer</p>
                            <!--Triggering button-->
                            <a class="rotate-btn" data-card="card-3"><i class="fa fa-repeat"></i> Click here to rotate</a>
                        </div>
                    </div>
                    <!--/.Front Side-->

                    <!--Back Side-->
                    <div class="face 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-3"><i class="fa fa-undo"></i> Click here to rotate back</a>

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

                </div>
            </div>
            <!--/.Rotating card-->
        </div>
        <!--/Third column-->

    </div>

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