TBS 2.1.1 Nested Tabs

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<section>
	<ul class="nav nav-tabs nav-stacked" style="float:left; height:300px">
		<li><a href="#sectionA" data-toggle="tab" style="height:100px">A</a></li>
		<li><a href="#sectionB" data-toggle="tab" style="height:100px">B</a></li>
		<li><a href="#sectionC" data-toggle="tab" style="height:100px">C</a></li>
	</ul>
	<ul class="tab-content">
		<li class="tab-pane active" id="sectionA">
			<p>Content Area A</p>
		</li>
		<li class="tab-pane" id="sectionB">
			<ul class="nav nav-tabs nav-stacked" style="float:left">
				<li><a href="#sectionB-1" data-toggle="tab" style="height:158px">1</a></li>
				<li><a href="#sectionB-2" data-toggle="tab" style="height:158px">2</a></li>
			</ul>
			<ul class="tab-content">
				<li class="tab-pane active" id="sectionB-1">
					<p>Content Area B1.</p>
				</li>
				<li class="tab-pane" id="sectionB-2">
					<p style="background:#000;">Content Area B2.</p>
				</li>
			</ul>
		</li>
		<li class="tab-pane" id="sectionC">
			<ul class="nav nav-tabs nav-stacked" style="float:left">
				<li><a href="#sectionC-1" data-toggle="tab" style="height:71px">1</a></li>
				<li><a href="#sectionC-2" data-toggle="tab" style="height:71px">2</a></li>
				<li><a href="#sectionC-3" data-toggle="tab" style="height:71px">3</a></li>
				<li><a href="#sectionC-4" data-toggle="tab" style="height:71px">4</a></li>
			</ul>
			<ul class="tab-content">
				<li class="tab-pane active" id="sectionC-1">
					<p>Content Area C1.</p>
				</li>
				<li class="tab-pane" id="sectionC-2">
					<p>Content Area C2.</p>
				</li>
				<li class="tab-pane" id="sectionC-3">
					<p>Content Area C3.</p>
				</li>
				<li class="tab-pane" id="sectionC-4">
					<p>Content Area C4.</p>
				</li>
			</ul>
		</li>
	</ul>
</section>