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.
Anna Deynah
Web Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab.
John Doe
Web 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.
<!--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.
<!--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.
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
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
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-->