I came across a useful code snippet on
The code snippet offers users a choice of 3 options with tabbed menus.
Take a look at the website to see how this tabbed menu functions.
Here is the code for this snippet
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span12">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" style="padding-top:15px;margin-left:-20px;">
<li class="active"><a href="#A" data-toggle="tab">Apartman A2(1+1)</a></li>
<li><a href="#B" data-toggle="tab">Apartman A4(2+2)</a></li>
<li><a href="#C" data-toggle="tab">Apartman A6(4+2)</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A">
<img src="http://placehold.it/80x80">
</div>
<div class="tab-pane" id="B">
<img src="http://placehold.it/80x80">
</div>
<div class="tab-pane" id="C">
<img src="http://placehold.it/80x80">
</div>
</div>
</div> <!-- /tabbable -->
</div>
</div>
</div>
</div>
<hr>
However, when I tried to integrate this into my website, it was affected by the previous list items and unordered list's behaviors and stopped working.
It ended up looking like this.
You can visit my website at
Check out the 'PRODUCTS' page to see the issue I'm facing.
I have attempted to override the styling behavior of the preceding ul and li tags to reset them to default Bootstrap styles, but so far I have been unsuccessful.