<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>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading"> <h4 >User Profile</h4></div>
<div class="panel-body">
<div class="col-md-4 col-xs-12 col-sm-6 col-lg-4">
<img alt="User Pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg" id="profile-image1" class="img-circle img-responsive">
</div>
<div class="col-md-8 col-xs-12 col-sm-6 col-lg-8" >
<div class="container" >
<h2>John Doe</h2>
<p>an <b> Employee</b></p>
</div>
<hr>
<ul class="container details" >
<li><p><span class="glyphicon glyphicon-user one" style="width:50px;"></span>i.rudberg</p></li>
<li><p><span class="glyphicon glyphicon-envelope one" style="width:50px;"></span>somerandom@email.com</p></li>
</ul>
<hr>
<div class="col-sm-5 col-xs-6 tital " >Date Of Joining: 15 Jun 2016</div>
</div>
</div>
</div>
</div>
