<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-md-4 content"> <div class="panel panel-default panel-profile"> <div class="panel-heading" style="background-image: url(https://raw.githubusercontent.com/hadiswaleh/Content/master/insta-2.jpg)"></div> <div class="panel-body text-center"> <img class="panel-profile-img mb10" src="https://raw.githubusercontent.com/hadiswaleh/Content/master/AVATAR.png"> <h3 class="panel-title"><strong>Hardy</strong></h3> <p>Senior Web Developer.</p> <a href="#" target="_blank" class="btn btn-primary btn-sm"> <span class="icon icon-add-user"></span> Read More </a> </div> </div> </div> </div> </div> </div> </div>

.panel-profile .panel-heading { height: 150px; background-size: cover; } .panel-profile-img { max-width: 100px; margin-top: -70px; margin-bottom: 5px; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } .mb10{ margin-bottom:10px} /*TIP Not to strech the card in smaller devices This is just optional class*/ @media only screen and (min-width:300px) and (max-width:600px) { .content{max-width:300px; margin:0 auto;} }