team members

Bootstrap snippet. team members, this snippet 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: users,list,team

HTML code

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row" id="team">
    <!-- TEAM MEMBER 1 - START -->
    <div class="col-xs-6 col-sm-3">
        <div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>CEO</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 1 - END -->
    
    <!-- TEAM MEMBER 2 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Project Manager</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 2 - END -->
    
    <!-- TEAM MEMBER 3 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Webdesigner</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 3 - END -->
    
    <!-- TEAM MEMBER 4 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Photographer</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 4 - END -->
</div>

CSS code

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

body{margin-top:20px;}


#team img {
    border:1px solid #EBEBEB;
	padding:10px;
	background-color:#F5F5F5;
}

#team h4 {
	color:#555555;
	font-size:20px;
	font-weight:300;
	margin:0 0 5px;
	font-family:'Open Sans', Verdana, Geneva, sans-serif;
	background-color:#EBEBEB;
	padding:15px;
}

#team span {
	font-size:12px;
	font-weight:bold;
	margin:10px 10px 5px;
	display:block;
}

#team p {
	color:#777777;
	font-size:13px;
	min-height:70px;
	padding:0 10px 10px;
}

#team .team-member {
	box-shadow:0 1px 5px 0 rgba(0,0,0,0.15);
}

#team .team-member .overlay-wrapper2 {
	position:relative;
	background-color:#F5F5F5;
}
	
#team .team-member .overlay-wrapper2 .overlay {
    background-color:rgba(0, 0, 0, 0.7);
	top:10px;
    left:0;
    display:none;
    position:absolute;
    right:0;
	height:15%;
	padding:0;
	margin:0 11px;
	text-align:center;
}

#team .team-member .overlay-wrapper2 .overlay i {
	font-size:18px;
	color:rgba(255, 255, 255, 0.8);
	display:inline-block;
	padding:10px 15px 0;
}

#team .team-member .overlay-wrapper2 .overlay i:hover {
	color:rgba(255, 255, 255, 1);
}
                                    

Similar snippets

Bootstrap snippet bs4 Trending Articles

bs4 Trending Articles

View

Bootstrap snippet bs4 project list with progress

bs4 project list with progress

View

Bootstrap snippet bs4 account tickets

bs4 account tickets

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 12th 2016, 21:17

Views: 3.7K

Rated 5/5 based on 3 reviews