Bootstrap Center Aligned Tab

tab.css

.portfolio {
padding: 80px 0; 
}
.portfolio .nav-tabs {
max-width: 600px;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
border: none; 
}
.portfolio .nav-tabs > li {
float: none;
display: inline-block;
*display: inline;
/* ie7 fix */
zoom: 1;
/* hasLayout ie7 trigger */ 
}
.portfolio .nav-tabs > li > a {
text-transform: uppercase;
color: #666;
border: 1px solid #f0f0f0;
border-radius: 20px; 
}
.portfolio .nav > li > a:hover, .portfolio .nav > li > a:focus {
background: none;
border: 1px solid #ff733c;
color: #ff733c;
outline: 0; 
}
.portfolio .nav-tabs > li.active > a, .portfolio .nav-tabs > li.active > a:hover, .portfolio .nav-tabs > li.active > a:focus {
border: 1px solid #ff733c;
color: #ff733c;
outline: 0; 
}
.portfolio .tab-content .single {
position: relative;
margin-bottom: 30px;
max-width: 640px;
margin-right: auto;
margin-left: auto;
cursor: pointer; 
}
.portfolio .tab-content .single:hover .on-hover {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); 
}
.portfolio .tab-content .single .on-hover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out; 
}
.portfolio .tab-content .single .on-hover a {
width: 100px;
height: 100px;
border: 1px solid rgba(255, 255, 255, 0.5);
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
text-decoration: none;
outline: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }
.portfolio .tab-content .single .on-hover a .inner {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
text-align: center; 
}
.portfolio .tab-content .single .on-hover a .inner h2 {
font-size: 16px;
color: #ff733c;
text-transform: uppercase; 
}
.portfolio .tab-content .single .on-hover a .inner p {
color: #fff; 
}

tab.html

<section class="portfolio">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a></li>
<li role="presentation"><a href="#beans" aria-controls="beans" role="tab" data-toggle="tab">beans</a></li>
<li role="presentation"><a href="#cup" aria-controls="cup" role="tab" data-toggle="tab">cup</a></li>
<li role="presentation"><a href="#plant" aria-controls="plant" role="tab" data-toggle="tab">plant</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="all">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service1.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service3.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service4.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service2.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service3.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service4.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service2.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service1.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>


</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="beans">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service1.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service2.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service3.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>




</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="cup">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service4.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service1.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service2.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="plant">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service3.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="single">
<img src="images/service4.jpg" class="img-responsive center-block" alt="">
<div class="on-hover">
	<a href="" title="">
		<div class="inner">
		<h2>Coffee Beans</h2>
		<p>Beans</p>
	</div>
	</a>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

</div>
</section>