CODEWITHSUNDEEP
htmltwitter-bootstrap
SirBdon
SirBdon

Reputation: 169

Twitter Bootsrap 3.0 - tabs-left not working anymore?

I couldn't find an answer to this elsewhere...

In bootstrap 2.x you could use the js tabs functionality and make them show on the left with:

<div class="tabbable tabs-left"> <-- TABS-LEFT HERE!!!

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

</div>

But now that functionality doesn't seem to carry over in bootstrap 3.0 and I don't see any documentation for it on the bootstrap website. Does anyone know if this was removed? It's hard to believe it would be...

Thank you for your help!

Upvotes: 1

Views: 2697

Answers (3)

Sainul Abid
Sainul Abid

Reputation: 99

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 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

Bluebaron
Bluebaron

Reputation: 2516

This is how I solved it.

<div class="tabbable tabs-left">
    <div class="row">
        <div class="col-md-4">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#location-tab" data-toggle="tab">Location</a></li>
                <li><a href="#amenities-tab" data-toggle="tab">Amenities</a></li>
                <li><a href="#photos-tab" data-toggle="tab">Photos</a></li>
            </ul>
        </div>

        <div class="col-md-8">
    <div class="tab-content">
        <div class="tab-pane active in" id="location-tab">

Upvotes: 0

pickypg
pickypg

Reputation: 22332

Unfortunately, as I used them too, it appears that all of the non-default tab alignments have been removed in 3.0 with no equivalent.

Copied directly from the above link, all three tab alignments were removed from 3.0:

  • .tabs-left
  • .tabs-right
  • .tabs-below

Upvotes: 1

Related Questions