List user profiles

This bootstrap snippet called "List user profiles" 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: user,list,profile,photo

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="col-sm-4">
    	<!-- Begin user profile -->
    	<div class="box-info text-center user-profile-2">
    		<div class="header-cover">
    			<img src="https://bootdey.com/img/Content/bg_element.jpg" alt="User cover">
    		</div>
    		<div class="user-profile-inner">
    			<h4 class="white">Jonny doe</h4>
    			<img src="https://bootdey.com/img/Content/User_for_snippets.png" class="img-circle profile-avatar" alt="User avatar">
    			<h5>Administrator</h5>
    				
    			<!-- User button -->
    			<div class="user-button">
    				<div class="row">
    					<div class="col-md-6">
    						<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
    					</div>
    					<div class="col-md-6">
    						<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div> 
    
    <div class="col-sm-4">
        <!-- Begin user profile -->
    	<div class="box-info text-center user-profile-2">
    		<div class="header-cover">
    			<img src="https://bootdey.com/img/Content/HexGames349.jpg" alt="User cover">
    		</div>
    		<div class="user-profile-inner">
    			<h4 class="white">Jonny doe</h4>
    			<img src="https://bootdey.com/img/Content/image_site_girl_write.jpg" class="img-circle profile-avatar" alt="User avatar">
    			<h5>Administrator</h5>
    				
    			<!-- User button -->
    			<div class="user-button">
    				<div class="row">
    					<div class="col-md-6">
    						<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
    					</div>
    					<div class="col-md-6">
    						<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
    
    <div class="col-sm-4">
        <!-- Begin user profile -->
    	<div class="box-info text-center user-profile-2">
    		<div class="header-cover">
    			<img src="https://bootdey.com/img/Content/bg_element.jpg" alt="User cover">
    		</div>
    		<div class="user-profile-inner">
    			<h4 class="white">Jonny doe</h4>
    			<img src="https://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-circle profile-avatar" alt="User avatar">
    			<h5>Administrator</h5>
    				
    			<!-- User button -->
    			<div class="user-button">
    				<div class="row">
    					<div class="col-md-6">
    						<button type="button" class="btn btn-primary btn-sm btn-block"><i class="fa fa-envelope"></i> Send Message</button>
    					</div>
    					<div class="col-md-6">
    						<button type="button" class="btn btn-default btn-sm btn-block"><i class="fa fa-user"></i> Add as friend</button>
    					</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

body{
 background:#EEEEEE;    
}
.user-profile-2 {
    text-align: center;
    position: relative;
    margin-top:10px;
}

.box-info {
    position: relative;
    padding: 15px;
    background: #fff;
    color: #5b5b5b;
    margin-bottom: 20px;
    -webkit-transition: All 0.4s ease;
    -moz-transition: All 0.4s ease;
    -o-transition: All 0.4s ease;
    border-bottom:4px solid #DDDDDD;
}

.user-profile-2 .header-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 130px;
    overflow: hidden;
    z-index: 1;
}

.user-profile-2 .user-profile-inner {
    z-index: 2;
    position: relative;
}

.user-profile-2 .user-profile-inner h4.white {
    color: #fff;
}

.user-profile-2 .user-profile-inner img.profile-avatar {
    box-shadow: 0 0 0 5px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,1);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,1);
    border: none;
    width:100px;
    height:100px;
}

.user-button {
    margin: 15px 0;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 15th 2014, 18:43

Views: 9.3K

Rated 5/5 based on 4 reviews