CODEWITHSUNDEEP
javascriptjquerycsshtmltwitter-bootstrap
user4280396
user4280396

Reputation:

How do I get bootstrap tabs-left to work in bootstrap 3.3.x

I noticed that nav-tabs left doesn't work in Bootstrap 3.3.0,3.3.2 and was wandering if anyone knew how to re-enable the style. Tabs should run up and down, with content chosen on the right.

Working bootstrap2.3.2 BIN:

http://jsbin.com/vimekuloqo/4/edit

Here's the not working 3.3.0 link:

http://jsbin.com/wituxucuja/1/edit

Relevant code (directly from http://getbootstrap.com/2.3.2/components.html#navs) 

          <ul class="nav nav-tabs">
            <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
            <li class=""><a href="#lB" data-toggle="tab">Section 2</a></li>
            <li class=""><a href="#lC" data-toggle="tab">Section 3</a></li>
          </ul>

          <div class="tab-content">
            <div class="tab-pane active" id="lA">
              <p>I'm in Section A.</p>
            </div>
            <div class="tab-pane" id="lB">
              <p>Howdy, I'm in Section B.</p>
            </div>
            <div class="tab-pane" id="lC">
              <p>What up girl, this is Section C.</p>
            </div>
          </div>
        </div>

...

<script language=javascript>
$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
    else {
        e.preventDefault();
        $(this).tab('show');
    }
});
</script>

Upvotes: 1

Views: 930

Answers (1)

pantsburgh
pantsburgh

Reputation: 146

This article provides a full answer with code and demo down the page a ways: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

The simple answer is you need to add .nav-stacked to the <ul> and then use the normal row/column system to lay it out. BS3 doesn't natively support floating the tabs around on its own like BS2 did.

http://jsbin.com/kobegaguwa/1/edit

Note that for jsbin preview you need to use xs columns or it will stack everything in 1 column responsively.

The default styling doesn't work very well for tabs, but works ok for pills.

Upvotes: 0

Related Questions