Utilizing the X-tabs plugin, I have been working with Bootstrap 3 tabs and styling them as shown below:
HTML :
<div class='tabs-x tabs-below'>
<div id="myTabContent-2" class="tab-content">
<div class="tab-pane fade in active" id="home-2">
<div class="col-xs-4 col-md-2">
<p>The FALSE Tabs</p>
</div>
</div>
<div class="tab-pane fade" id="profile-2">
<p>The True TaBs WORKED</p>
</div>
</div>
<ul id="myTab-2" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home-2" role="tab" data-toggle="tab">Home</a>
</li>
<li><a href="#profile-2" role="tab-kv" data-toggle="tab">Profile</a>
</li>
</ul>
</div>
I attempted to add a new div within the tabs content like this:
<div class="col-xs-4 col-md-2"></div>
The problem arises when this div appears outside of the tabs content and does not function correctly. How can this issue be resolved?
View DEMO FIDDLE here (note the problem in the first tab, whereas the second tab functions correctly).