HTML code
This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<div class="content-wrapper container">
<div class="row">
<div class="large-12">
<div class="page-title">
<h1>users <small></small></h1>
</div>
</div>
</div><!-- end .page title-->
<div class="row users-row">
<div class="large-6 columns">
<div class="user-col">
<div class="media-object">
<a class="pull-left media-object-section" href="#">
<img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;">
</a>
<div class="media-object-section">
<h3 class="follower-name">Ray Sin</h3>
<div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
<div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div>
<div style="height: 20px;"></div>
<div class="btn-toolbar">
<div class="button-group">
<a class="button btn-3d">Send message</a>
<a class="button btn-3d success">Followers</a>
<a class="button btn-3d warning">Following</a>
</div><!-- btn-group -->
</div><!-- btn-toolbar -->
</div><!-- media-body -->
</div>
</div>
</div><!--.col-6-->
<div class="large-6 columns">
<div class="user-col">
<div class="media-object">
<a class="pull-left media-object-section" href="#">
<img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;">
</a>
<div class="media-object-section">
<h3 class="follower-name">Ray Sin</h3>
<div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
<div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div>
<div style="height: 20px;"></div>
<div class="btn-toolbar">
<div class="button-group">
<a class="button btn-3d">Send message</a>
<a class="button btn-3d success">Followers</a>
<a class="button btn-3d warning">Following</a>
</div><!-- btn-group -->
</div><!-- btn-toolbar -->
</div><!-- media-body -->
</div>
</div>
</div><!--.col-6-->
<div class="large-6 columns">
<div class="user-col">
<div class="media-object">
<a class="pull-left media-object-section" href="#">
<img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;">
</a>
<div class="media-object-section">
<h3 class="follower-name">Ray Sin</h3>
<div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
<div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div>
<div style="height: 20px;"></div>
<div class="btn-toolbar">
<div class="button-group">
<a class="button btn-3d">Messages</a>
<a class="button btn-3d success">Followers</a>
<a class="button btn-3d warning">Following</a>
</div><!-- btn-group -->
</div><!-- btn-toolbar -->
</div><!-- media-body -->
</div>
</div>
</div><!--.col-6-->
<div class="large-6 columns">
<div class="user-col">
<div class="media-object">
<a class="pull-left media-object-section" href="#">
<img class=" img-circle" src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="100x100" data-src="holder.js/100x100" style="width: 100px; height: 100px;">
</a>
<div class="media-object-section">
<h3 class="follower-name">Ray Sin</h3>
<div><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
<div><i class="fa fa-briefcase"></i> Software Engineer at <a href="">SomeCompany, Inc.</a></div>
<div style="height: 20px;"></div>
<div class="btn-toolbar">
<div class="button-group">
<a class="button btn-3d">Send message</a>
<a class="button btn-3d success">Followers</a>
<a class="button btn-3d warning">Following</a>
</div><!-- btn-group -->
</div><!-- btn-toolbar -->
</div><!-- media-body -->
</div>
</div>
</div><!--.col-6-->
</div>
</div>CSS code
This is the css code used to create this bootstrap snippet, You can 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;
background:#eee;
}
.user-col {
padding: 15px;
background-color: #fff;
margin-bottom: 30px;
}
.btn-3d {
border-bottom: 3px solid rgba(0,0,0,.15);
}
.img-circle {
border-radius: 50%;
}
.users-row img {
margin-right: 10px;
}