Stacked Tabs in Bootstrap 3

Question

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       lt ul class  nav nav-tabs nav-stacked  gt           lt li gt  lt a href   tab1  data-toggle  tab  gt Tab 1 lt  a gt  lt  li gt           lt li gt  lt a href   tab2  data-toggle  tab  gt Tab 2 lt  a gt  lt  li gt           lt li gt  lt a href   tab3  data-toggle  tab  gt Tab 3 lt  a gt  lt  li gt       lt  ul gt         lt div class  tab-content  gt           lt div class  tab-pane fade  id  tab1  gt              Tab 1 content          lt  div gt           lt div class  tab-pane fade  id  tab2  gt              Tab 2 content                        lt  div gt           lt div class  tab-pane fade  id  tab3  gt              Tab 3 content          lt  div gt       lt  div gt    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

User · Answer

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

User · Answer

Left  Right and Below tabs were removed from Bootstrap 3  but you can add custom CSS to achieve this     tabs-below  gt   nav-tabs   tabs-right  gt   nav-tabs   tabs-left  gt   nav-tabs     border-bottom  0      tab-content  gt   tab-pane   pill-content  gt   pill-pane     display  none      tab-content  gt   active   pill-content  gt   active     display  block      tabs-below  gt   nav-tabs     border-top  1px solid  ddd      tabs-below  gt   nav-tabs  gt  li     margin-top  -1px    margin-bottom  0      tabs-below  gt   nav-tabs  gt  li  gt  a     -webkit-border-radius  0 0 4px 4px       -moz-border-radius  0 0 4px 4px            border-radius  0 0 4px 4px      tabs-below  gt   nav-tabs  gt  li  gt  a hover   tabs-below  gt   nav-tabs  gt  li  gt  a focus     border-top-color   ddd    border-bottom-color  transparent      tabs-below  gt   nav-tabs  gt   active  gt  a   tabs-below  gt   nav-tabs  gt   active  gt  a hover   tabs-below  gt   nav-tabs  gt   active  gt  a focus     border-color  transparent  ddd  ddd  ddd      tabs-left  gt   nav-tabs  gt  li   tabs-right  gt   nav-tabs  gt  li     float  none      tabs-left  gt   nav-tabs  gt  li  gt  a   tabs-right  gt   nav-tabs  gt  li  gt  a     min-width  74px    margin-right  0    margin-bottom  3px      tabs-left  gt   nav-tabs     float  left    margin-right  19px    border-right  1px solid  ddd      tabs-left  gt   nav-tabs  gt  li  gt  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  gt   nav-tabs  gt  li  gt  a hover   tabs-left  gt   nav-tabs  gt  li  gt  a focus     border-color   eeeeee  dddddd  eeeeee  eeeeee      tabs-left  gt   nav-tabs  active  gt  a   tabs-left  gt   nav-tabs  active  gt  a hover   tabs-left  gt   nav-tabs  active  gt  a focus     border-color   ddd transparent  ddd  ddd     border-right-color   ffffff      tabs-right  gt   nav-tabs     float  right    margin-left  19px    border-left  1px solid  ddd      tabs-right  gt   nav-tabs  gt  li  gt  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  gt   nav-tabs  gt  li  gt  a hover   tabs-right  gt   nav-tabs  gt  li  gt  a focus     border-color   eeeeee  eeeeee  eeeeee  dddddd      tabs-right  gt   nav-tabs  active  gt  a   tabs-right  gt   nav-tabs  active  gt  a hover   tabs-right  gt   nav-tabs  active  gt  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   lt ul class  nav nav-pills nav-stacked col-md-3  gt       lt li gt  lt a href   a  data-toggle  tab  gt 1 lt  a gt  lt  li gt       lt li gt  lt a href   b  data-toggle  tab  gt 2 lt  a gt  lt  li gt       lt li gt  lt a href   c  data-toggle  tab  gt 3 lt  a gt  lt  li gt   lt  ul gt

User · Answer

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    lt div class  row  gt      lt  -- Navigation Buttons -- gt     lt div class  col-md-3  gt       lt ul class  nav nav-pills nav-stacked  id  myTabs  gt         lt li class  active  gt  lt a href   home  data-toggle  pill  gt Home lt  a gt  lt  li gt         lt li gt  lt a href   profile  data-toggle  pill  gt Profile lt  a gt  lt  li gt         lt li gt  lt a href   messages  data-toggle  pill  gt Messages lt  a gt  lt  li gt       lt  ul gt     lt  div gt      lt  -- Content -- gt     lt div class  col-md-9  gt       lt div class  tab-content  gt         lt div class  tab-pane active  id  home  gt Home lt  div gt         lt div class  tab-pane  id  profile  gt Profile lt  div gt         lt div class  tab-pane  id  messages  gt Messages lt  div gt       lt  div gt     lt  div gt    lt  div gt    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

User · Answer

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

[twitter-bootstrap] Stacked Tabs in Bootstrap 3

Examples related to twitter-bootstrap

Examples related to tabs

Examples related to twitter-bootstrap-3