<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>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portlet box grey-cascade">
<div class="portlet-title">
<ul class="nav nav-tabs nav-tabs-lg pull-left">
<li class="active"><a data-toggle="tab" href="#tab_1"
aria-expanded="true">
<div class="hidden-xs" align="center">Details</div>
<div class="hidden-md hidden-lg hidden-sm">
<i class="fa fa-flag-o "></i>
</div>
</a></li>
<li class=""><a data-toggle="tab" href="#tab_2"
aria-expanded="true">
<div class="hidden-xs">
Mail <span class="badge badge-success"> 4 </span>
</div>
<div class="hidden-md hidden-lg hidden-sm">
<i class="fa fa-envelope-o "></i>
</div>
</a></li>
<li class=""><a data-toggle="tab" href="#tab_3"
aria-expanded="true">
<div class="hidden-xs">
Ban <span class="badge badge-danger"> 2 </span>
</div>
<div class="hidden-md hidden-lg hidden-sm">