1

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!

SirBdon
  • 169
  • 1
  • 3
  • 12
  • 1
    Yes, this was removed in 3.. see answer here: http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3/18443236#18443236 – Carol Skelly Aug 27 '13 at 02:27

3 Answers3

1

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
pickypg
  • 22,034
  • 5
  • 72
  • 84
0

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">
Bluebaron
  • 2,289
  • 2
  • 27
  • 37
0

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.

Sainul Abid
  • 99
  • 1
  • 9