My team

This bootstrap snippet called "My team" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,team,leader

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippet">
    <div class="panel panel-info panel-shadow">
		    <div class="panel-heading">
		        <h3>
		            <img class="img-circle img-thumbnail" src="https://bootdey.com/img/Content/user_1.jpg">
		            Deyson Bejarano
		        </h3>
		    </div>
		    <div class="panel-body"> 
		    <div class="team padd">
				<div class="container bootstrap snippet">
					<div class="heading">
						<h2>My Team</h2>
						<h6>Esse Quam Nihil Molestiae</h6>
						<div class="divider"></div>
						<p>At vero eos et accusamus et iustoccaecati cupiditate non provident, similos qui ratione voluptatem </p>
						<div class="divider"></div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/1/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">H. Rackham</a></h4>
									<span>Director of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/2/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">Jhon Wilson</a></h4>
									<span>MD of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/3/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">D. Danial</a></h4>
									<span>CMD of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/5/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">Deo Rachem</a></h4>
									<span>Designer of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/6/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">Jennifer James</a></h4>

									<span>CA of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="col-md-3 col-sm-6">
							<div class="team-member">
								<a href="#"><img src="https://lorempixel.com/400/400/people/7/" class="img-responsive" alt="Team-member"></a>
								<div class="member-details">
									<h4><a href="#">Pall Waths</a></h4>
									<span>Developer of the Company</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

.team{
    border-top: 1px solid #e6e6e6;
	padding-bottom: 60px;
}
.panel-shadow{
    box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px;
}
.team .team-member{
	margin-top: 20px;
	margin-bottom: 30px;
}

.team .team-member img{
	max-width: 55px;
	float: left;
	border: 1px solid #f5f5f5;
	border-radius: 5px;
}

.team .team-member .member-details{
	margin-left: 65px;
}

.team .team-member .member-details h4{
	margin: 0;
	margin-bottom: 3px;
	padding-top: 9px;
	font-size: 14px;
	font-weight: bold;
}

.team .team-member .member-details h4 a{
	color: #787878;
}

.team .team-member .member-details span{
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	color: #aaaaaa;
}			              
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Aug 30th 2014, 10:30

Views: 5.0K

Rated 5/5 based on 3 reviews