Horizontal tabs in boostrtap - html

Question

I've using some code for custom vertical tabs in bootstrap and I trying to make them horizontal and text below every tab but I can't understand exactly how.
<section id="about">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="feature_header text-center">
<h3 class="feature_title"><b>Tabs</b></h3>
</div>
</div>
</div>
<div class="row">
<div class="feature-tab">
<div class="col-md-2 col-sm-3 col-xs-12">
<ul class="nav nav-tabs main-tab-list text-center" role="tablist">
<li role="presentation" class="active">
<a href="#home" role="tab" data-toggle="tab" >
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-laptop"></i>
</div>
</div>
<h4>Tab 1</h4>
</a>
</li>
<li role="presentation" >
<a href="#profile" role="tab" data-toggle="tab">
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-send"></i>
</div>
</div>
<h4>Tab 2</h4>
</a>
</li>
<li role="presentation" >
<a href="#messages" role="tab" data-toggle="tab">
<div class="single-tab">
<div class="f-icon">
<i class="fa fa-heart"></i>
</div>
</div>
<h4>Tab 3</h4>
</a>
</li>
</ul>
</div> <!-- col-md-12 end -->
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="tab-content main-tab-content">
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 1</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 2</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane active " id="home">
<div class="col-md-12 col-sm-9">
<div class="c-tab">
<h4>Tab 3</h4>
<p>Lorem ipsum.... </p>
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I wont post CSS because will be very long instead I'll post the JsFiddle.
For more clear I have made this Jsfiddle. Can some one tell how will this go horizontal. I mean Tab 1, Tab 2 and Tab 3..

Answer 1

You can try as below, i just edited your below class and it works!
you should always give style float: left; and display: inherit; together to do the magic :)
.main-tab-list li{
padding: 10px 0px 10px;
border: 1px solid#eee;
width: 150px;
/* background: #FBFBFB; */
float: left;
margin-bottom: 5px;
border-radius: 5px;
display: inherit;
margin-right: 5px;
}

Answer 2

remove .col-md class from .nav-tabs parent and replace it by .row class, and your `` should be:
.main-tab-list li{
position: relative;
display: inline-block;
float: left; /* or none */
padding: 10px 0px 10px;
border: 1px solid#eee;
width: 150px;
/*background: #FBFBFB;*/
margin-bottom: 5px;
border-radius: 5px;
}
http://jsfiddle.net/yt21wup5/