<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>
<!------ Include the above in your HEAD tag ---------->
<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">
<i class="fa fa-ban danger-icon"></i>
</div>
</a></li>
</ul>
</div>
<div class="portlet-body">
<div class="tabbable">
<div class="tab-content">
<div id="tab_1" class="tab-pane active">
<p>
Tab 1
</p>
<p>
This is userfriendly responsive tab menu with metro UI
</p>
<p>
<a class="btn btn-success">Submit</a>
</p>
</div>
<div id="tab_2" class="tab-pane ">
<p>
Tab 2
</p>
<p>
This is userfriendly responsive tab menu with metro UI
</p>
<p>
<a class="btn btn-warning">Mail</a>
</p>
</div>
<div id="tab_3" class="tab-pane ">
<p>
Tab 3
</p>
<p>
This is userfriendly responsive tab menu with metro UI
</p>
<p>
<a class="btn btn-danger">Delete</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.badge {
border-radius: 12px !important;
font-size: 11px !important;
font-weight: 300;
height: 18px;
padding: 3px 6px;
text-align: center;
text-shadow: none !important;
vertical-align: middle;
}
.badge-success {
background-color: #45b6af;
background-image: none;
}
.badge-danger {
background-color: #f3565d;
background-image: none;
}
.danger-icon{
color: #f3565d;
}
.portlet {
border-radius: 4px;
margin-bottom: 25px;
margin-top: 0;
padding: 0;
}
.portlet > .portlet-title > .nav-tabs {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 0 none;
display: inline-block;
float: right;
margin: 0;
}
div, input, select, textarea, span, img, table, label, td, th, p, a, button, ul, code, pre, li {
border-radius: 0 !important;
}
.portlet > .portlet-body.grey-cascade, .portlet.grey-cascade {
background-color: #95a5a6;
}
.portlet.box.grey-cascade {
border-color: #b1bdbd !important;
border-image: none;
border-style: none solid solid;
border-width: 0 1px 1px;
}
.portlet.box > .portlet-title {
border-bottom: 0 none;
color: #fff;
margin-bottom: 0;
padding: 0 10px;
}
.portlet.box > .portlet-body {
background-color: #fff;
padding: 10px;
}
.portlet > .portlet-body {
border-radius: 0 0 4px 4px;
clear: both;
}
.portlet > .portlet-title > .nav-tabs > li > a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 0 none;
color: #fff;
margin: 5px 0 0 1px;
padding: 8px 12px;
}
.portlet > .portlet-title > .nav-tabs > li.active > a, .portlet > .portlet-title > .nav-tabs > li:hover > a {
background: #fff none repeat scroll 0 0;
border: 0 none;
color: #333;
}
.nav-tabs > li > a, .nav-pills > li > a {
border-radius: 4px 4px 0 0;
font-size: 14px;
}
.nav-tabs > li > a, .nav-pills > li > a {
border-radius: 4px 4px 0 0;
font-size: 14px;
}
