<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<div class="card-block well">
<div class="box ">
<div class="icon">
<div class="image"><i class="glyphicon glyphicons-server-new"></i></div>
</div>
<div class="space"></div>
</div>
<h5 class="text-bold">Tawshif Ahsan Khan</h5>
</div>
<div class="col-xs-4 col-sm-3 col-lg-2">
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<div class="box ">
<div class="icon">
<div class="image"><i class="glyphicon glyphicon-asterisk"></i></div>
</div>
<div class="card-block">
<h4 class="card-title">Tawshif Ahsan Khan</h4>
<div class="meta">
<a href="#">Friends</a>
</div>
<div class="card-text">
Tawshif is a web designer living in Bangladesh.
</div>
</div>
<div class="card-footer">
<span class="float-right">Joined in 2013</span>
<span><i class=""></i>75 Friends</span>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<p class="card-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis!
</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<div class="card-block">
<figure class="profile">
<img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt="">
</figure>
<h4 class="card-title mt-3">Tawshif Ahsan Khan</h4>
<div class="meta">
<a>Friends</a>
</div>
<div class="card-text">
Tawshif is a web designer living in Bangladesh.
</div>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
<button class="btn btn-secondary float-right btn-sm">show</button>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card card-inverse card-primary ">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<blockquote class="card-blockquote p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card card-inverse card-info">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<div class="card-block">
<figure class="profile">
<img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt="">
</figure>
<h4 class="card-title mt-3">Tawshif Ahsan Khan</h4>
<div class="meta card-text">
<a>Friends</a>
</div>
<div class="card-text">
Tawshif is a web designer living in Bangladesh.
</div>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
<button class="btn btn-info float-right btn-sm">Follow</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card card-inverse card-info">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<div class="card-block">
<figure class="profile profile-inline">
<img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt="">
</figure>
<h4 class="card-title">Tawshif Ahsan Khan</h4>
<div class="card-text">
Tawshif is a web designer living in Bangladesh.
</div>
</div>
<div class="card-footer">
<small>Last updated 3 mins ago</small>
<button class="btn btn-info float-right btn-sm">Follow</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card card-inverse card-info">
<img class="card-img-top" src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif">
<div class="card-block">
<figure class="profile profile-inline">
<img src="http://success-at-work.com/wp-content/uploads/2015/04/free-stock-photos.gif" class="profile-avatar" alt="">
</figure>
<h4 class="card-title">Tawshif Ahsan Khan</h4>
<div class="card-text">
Tawshif is a web designer living in Bangladesh.
</div>
</div>
<div class="card-footer">
<button class="btn btn-info btn-sm">Follow</button>
</div>
</div>
</div>
</div>
</div>
html {
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 14px;
}
h5 {
font-size: 1.28571429em;
font-weight: 700;
line-height: 1.2857em;
margin: 0;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 0;
border: none;
border-radius: .28571429rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
}
.card-block {
font-size: 1em;
position: relative;
margin: 0;
padding: 1em;
border: none;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card-img-top {
display: block;
width: 100%;
height: auto;
}
.card-title {
font-size: 1.28571429em;
font-weight: 700;
line-height: 1.2857em;
}
.card-text {
clear: both;
margin-top: .5em;
color: rgba(0, 0, 0, .68);
}
.card-footer {
font-size: 1em;
position: static;
top: 0;
left: 0;
max-width: 100%;
padding: .75em 1em;
color: rgba(0, 0, 0, .4);
border-top: 1px solid rgba(0, 0, 0, .05) !important;
background: #fff;
}
.card-inverse .btn {
border: 1px solid rgba(0, 0, 0, .05);
}
.profile {
position: absolute;
top: -12px;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 25px;
height: 25px;
margin: 0;
border: 1px solid #fff;
border-radius: 50%;
}
.profile-avatar {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.profile-inline {
position: relative;
top: 0;
display: inline-block;
}
.profile-inline ~ .card-title {
display: inline-block;
margin-left: 4px;
vertical-align: top;
}
.text-bold {
font-weight: 700;
}
.meta {
font-size: 1em;
color: rgba(0, 0, 0, .4);
}
.meta a {
text-decoration: none;
color: rgba(0, 0, 0, .4);
}
.meta a:hover {
color: rgba(0, 0, 0, .87);
}
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #63B76C; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform:rotate(360deg) scale(1.5); -moz-transform:rotate(360deg) scale(1.5); -o-transform:rotate(360deg) scale(1.5); -ms-transform:rotate(360deg) scale(1.5); transform:rotate(360deg) scale(1.5); }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; }
.box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; }
.box .space { height: 30px; }
