Hope it's ok to post this here. As I understand it bootstrap is used quite a bit in conjuction w/roots
so got this code...

					<div class="tabbable tabs-top">
						<ul class="nav nav-tabs">
						<li class="active"> <a href="#html" data-toggle="tab">html/css</a> </li>
						<li class=""> <a href="#php" data-toggle="tab">php/css</a> </li>
						<li class=""> <a href="#css" data-toggle="tab">whatever/css</a> </li>

						<div class="tab-content"> 
							<div class="tab-pane active" id="html"> </div>
								<p>htmlish stuff and content</p>
							<div class="tab-pane" id="php"> </div>
								<p>phpish stuff and content</p>
							<div class="tab-pane" id="css"> </div>
								<p>css stuff and content</p>
						</div> <!-- tabcontent end -->
giving one of the tabs the class of "active" and it's respective <a href> a class of active as well should only show the content for that tab. The other content would only be displayed when the user click on the other tabs.
In my case the content for each tab shows all the time.
So where did I go wrong?