Stacked Tabs in Bootstrap 3

by

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>

More Related Contents:

  1. Bootstrap 3 Navbar Collapse
  2. Five equal columns in twitter bootstrap
  3. Bootstrap Rows and Columns – Do I need to use row?
  4. What is the difference between Bootstrap .container and .container-fluid classes?
  5. Responsive website zoomed out to full width on mobile
  6. Bootstrap 3: Keep selected tab on page refresh
  7. Bootstrap with jQuery Validation Plugin
  8. Bootstrap Fluid grid system with different height
  9. How to remove responsive features in Twitter Bootstrap 3?
  10. Updating Bootstrap to version 3 – what do I have to do?
  11. Bootstrap – row can I have columns add up to more then 12?
  12. Bootstrap 3 breakpoints and media queries
  13. Bootstrap 3 – Why is row class is wider than its container?
  14. How do you make Twitter Bootstrap Accordion keep one group open?
  15. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  16. How to create a sticky left sidebar menu using bootstrap 3?
  17. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  18. BootStrap3 keep the dropdown menu open after click on the item
  19. Should I use Bootstrap from CDN or make a copy on my server?
  20. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  21. Bootstrap 3 Gutter Size
  22. What’s the tabindex=”-1″ in bootstrap for
  23. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  24. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  25. Different slide duration for each item on bootstrap 3.1 carousel
  26. How can I get my Twitter Bootstrap buttons to right align?
  27. Decreasing height of bootstrap 3.0 navbar
  28. Binding to Collapse event in Twitter Bootstrap 3
  29. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  30. How to justify navbar-nav in Bootstrap 3

Leave a Comment