156

I am trying to implement left-aligned stacked tabs using the Tab jquery plugin in Bootstrap 3 where tabs are rendered vertically to the left of tab content, rather than on top. When I try the following;

   <ul class="nav nav-tabs nav-stacked">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>


    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2">
            Tab 2 content              
        </div>
        <div class="tab-pane fade" id="tab3">
            Tab 3 content
        </div>
    </div>

Tabs are stacked on top of each other, but are not properly rendered as being turned to the left, instead they are just horizontal tabs stuck on top of each other. Tab content is properly shown/hidden in the content divs.

This was handled in Bootstrap 2.x using the tab-left and tab-right classes, but this is deprecated in Bootstrap 3 and doesn't really seem to be replaced with anything. Does anyone know if proper left-right tab rendering is possible in the Bootstrap 3 Tab plugin?

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
osmbergs
  • 1,593
  • 2
  • 11
  • 6
  • 1
    You can use the `.nav` class alone, then with the grid set the width of the nav and your content. No need for a 'stacked nav' since `.nav` is stacked by default. – Patrick Berkeley Mar 01 '14 at 00:08

4 Answers4

237

Left, Right and Below tabs were removed from Bootstrap 3, but you can add custom CSS to achieve this..

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}

Working example: http://bootply.com/74926

UPDATE

If you don't need the exact look of a tab (bordered appropriately on the left or right as each tab is activated), you can simple use nav-stacked, along with Bootstrap col-* to float the tabs to the left or right...

nav-stacked demo: http://codeply.com/go/rv3Cvr0lZ4

<ul class="nav nav-pills nav-stacked col-md-3">
    <li><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 34
    This perfectly resolves the issue. Still wondering why they pulled this out of Bootstrap 3 though. – osmbergs Aug 27 '13 at 10:32
  • 1
    I had issues putting CKEditor in a tab pane with the above CSS. What worked for me was putting it all in a row, tabs in one column, content in the other: `
      `....`
    `... I did this and removed the 3 float rules from the above CSS as they're not needed w/ the row class.
     – Thom Porter Dec 01 '13 at 02:07
  • 24
    Why was it removed? o.O – roosevelt Feb 05 '14 at 06:17
  • greate but what we can do with table in a tab-left? – falcon Feb 13 '14 at 11:25
  • 2
    There's no real need for adding left/right tabs. My comment above: You can use the .nav class alone, then with the grid set the width of the nav and your content. No need for a 'stacked nav' since .nav is stacked by default. – Patrick Berkeley Mar 01 '14 at 00:09
  • 4
    Yes, the .nav alone is stacked, but it doesn't look like a tab (appropriate left, right borders) when it's selected/active. That's the purpose of tabs. – Carol Skelly Mar 01 '14 at 11:42
  • Understood. I just think it's preferable to use `.nav` and be *additive* with the styles for borders, rounded corners, etc. than to override all the built-in .nav-tabs styles. – Patrick Berkeley Mar 18 '14 at 23:31
  • 17
    You should not need to add this back in. This was removed purposefully. See the official Bootstrap documentation as to how you should be handling this now under JavaScript / Tabs. See also, this tutorial on how to use the Bootstrap 3 setup properly to do vertical tabs. http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/ – Neil Monroe Apr 25 '14 at 20:14
  • 1
    While I do like the clear continuity look of the selected tab into the tab content, unfortunately this doesn't seem to work right. For example when we specify a bg color for content in the tab content, it overlaps the tab header as well - please see http://www.bootply.com/cre9NpmXpA – msanjay Jun 25 '14 at 17:47
  • 3
    for simple text content, either solution is fine. If anyone else faces the issue I'm talking about: @dbtek's solution worked best: [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs) I just had to include the CSS file... thanks @dbtek! – msanjay Jun 26 '14 at 06:39
  • 2
    I have a feeling that side tabs were removed as part of the whole mobile-first transition. While side tabs are nice, they make less sense semantically on a device with not enough width for content within the tabs. – Nick McCurdy Aug 01 '14 at 23:00
  • 1
    bootply is not working and showing application error.does anyone know whats the problem?? – User2413 Aug 04 '14 at 07:39
  • @NeilMonroe You should add your comment as an answer. Best solution in this thread that I've tried. – David Fritsch Sep 08 '14 at 22:27
  • I have problems with content height inside the tab-content. The trick above resolved my issue: https://gist.github.com/lavoiesl/6610753#gistcomment-1684105 – Ricardo Vigatti Jan 29 '16 at 23:27
  • Can this have the pane covered with a right top and bottom border? something like this for horizontal tabs http://jsfiddle.net/996Bw/ – MohitC Jul 31 '16 at 15:28
  • Thank you for the "nav-stacked" idea, I was racking my brain trying to find a solution that was clean and you provided it nicely – Kender Oct 19 '17 at 20:49
48

The Bootstrap team seems to have removed it. See here: https://github.com/twbs/bootstrap/issues/8922 . @Skelly's answer involves custom css which I didn't want to do so I used the grid system and nav-pills. It worked fine and looked great. The code looks like so:

<div class="row">

  <!-- Navigation Buttons -->
  <div class="col-md-3">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
      <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
      <li><a href="#profile" data-toggle="pill">Profile</a></li>
      <li><a href="#messages" data-toggle="pill">Messages</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div class="col-md-9">
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home</div>
      <div class="tab-pane" id="profile">Profile</div>
      <div class="tab-pane" id="messages">Messages</div>
    </div>
  </div>

</div>

You can see this in action here: http://bootply.com/81948

[Update] @SeanK gives the option of not having to enable the nav-pills through Javascript and instead using data-toggle="pill". Check it out here: http://bootply.com/96067. Thanks Sean.

David Lemayian
  • 2,679
  • 1
  • 20
  • 18
  • 10
    You don't need to include the javascript. If you add data-toggle="pill" to each a-tag then it will work automatically using bootstrap. You can see here: http://bootply.com/96067 – SeanK Nov 22 '13 at 21:37
  • Thanks @SeanK. Have added it to the answer. – David Lemayian Nov 26 '13 at 09:56
  • this was nice and I would've preferred this without the custom CSS, but @Skelly's tabs do have a more 'continuos' look and relationship between the active tab and the content. Would be good if the same could be achieved somehow here but I couldn't figure out how. I made a fork narrowing down just one example for simplicity: http://www.bootply.com/QZfrLF0XjD – msanjay Jun 25 '14 at 17:04
  • 1
    On the other hand, I put in some colored content and this seemed to handle it much better than the accepted approach. see http://www.bootply.com/SeQ6z7fhbQ and http://www.bootply.com/cre9NpmXpA – msanjay Jun 25 '14 at 17:45
30

To get left and right tabs (now also with sideways) support for Bootstrap 3, bootstrap-vertical-tabs component can be used.

https://github.com/dbtek/bootstrap-vertical-tabs

dbtek
  • 928
  • 2
  • 12
  • 14
9

You should not need to add this back in. This was removed purposefully. The documentation has changed somewhat and the CSS class that is necessary ("nav-stacked") is only mentioned under the pills component, but should work for tabs as well.

This tutorial shows how to use the Bootstrap 3 setup properly to do vertical tabs:
tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills

Neil Monroe
  • 1,201
  • 1
  • 15
  • 20
  • They have removed it completely now. See the link above for the procedure. – Neil Monroe Feb 20 '15 at 17:05
  • Thank you very much. The article you linked to provides practical, working examples and lots of explanation. This is just what I was looking for. – Aluan Haddad Apr 18 '15 at 09:35
  • For what it's worth, this only looks right for nav-pills. nav-tabs will be stacked but the styling looks like horizontal tabs on top. Since the OP asked specifically about nav-tabs, I don't think this can be considered an acceptable answer. – Jay Mathis Sep 09 '16 at 20:38
  • 1
    The URL no longer works! This answer then becomes meaningless! – Bobort Nov 27 '19 at 15:46