Bootstrap tabbable tabs and setting one of them to active

Get Started
1

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>

						</ul>	
						<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 -->
					</div>

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?

2

We can’t tell where you are going wrong without seeing how you are trying to show/hide your content. Are you using JS, or CSS, or both?

Here are some pretty easy ways to set up tabbed content: http://pageaffairs.com/code/code-for-creating-tabs

3

Hello there Ralph!
i am using whatever came w/twitter bootstrap.
Just started using it, currently on my sandbox. will go check out the link you provided. thanks!