<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>
<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>
<ul class="navigation">
<li class="active">
<a data-toggle="tab" href="#information">
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#settings">
<span class="glyphicon glyphicon-cog"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#email">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</li>
<li>
<a data-toggle="tab" href="#events">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</li>