<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-4 col-md-4 user-details"> <div class="user-image"> <img src="http://www.gravatar.com/avatar/2ab7b2009d27ec37bffee791819a090c?s=100&d=mm&r=g" alt="Karan Singh Sisodia" title="Karan Singh Sisodia" class="img-circle"> </div> <div class="user-info-block"> <div class="user-heading"> <h3>Karan Singh Sisodia</h3> <span class="help-block">Chandigarh, IN</span> </div> </div> </div> </div> </div>

body {background: #EAEAEA;} .user-details {position: relative; padding: 0;} .user-details .user-image {position: relative; z-index: 1; width: 100%; text-align: center;} .user-image img { clear: both; margin: auto; position: relative;} .user-details .user-info-block {width: 100%; position: absolute; top: 55px; background: rgb(255, 255, 255); z-index: 0; padding-top: 35px;}