Skip to content
This repository

Nested Tabs with different styles doesn't work #1823

petecocoon opened this Issue February 08, 2012 · 8 comments

6 participants

Piero Bozzolo Mark Otto silviustan Nick Smith David Sauve Nate Radebaugh
Piero Bozzolo

It's seems that if i have a left-aligned tabs with .tabs-left class, isn't possible to insert a nested tabs with another style (for example the default top aligned style).

Mark Otto

What about it doesn't work? CSS, JS? Have a jsfiddle or example to include?



I have the same problem.

My example code is here:

The problem is that inside on a left("Tabs on the left") tabbed content I put new tabs but I don't want to inherit the parent tabs behavior. I want that child tabs to be on top, or below.

Thanks for the great stuff! :) I love it!

Nick Smith

It's possible for now if you make the outer one <ul class="nav nav-list pull-left">, and don't use the .tabbable div at all.

You don't get quite the same look.

Mark Otto
mdo commented March 11, 2012

You'll have to provide a jsfiddle please. Pasting in @silviustan's example code (and fixing his broken a tag in the second level of tab links) doesn't show me anything worthwhile locally.

David Sauve

I'm having the same issue. To elaborate, it looks as though there's no way of specifying a different style of tabs on an inner set of tabs. For example, if you have something like a page with tabs-left and want to have another area with tabs on the top inside a div on the page it doesn't work. You end up with the "inner" tabs all left aligned as well.

David Sauve

Alright, here's the CSS I used to "fix" the issue. It adds another class: "tabs-above" that you can use. I'm sure someone that's a lot better at CSS then I am can clean this up.

.tabs-above {
    border-right: none;
.tabs-above .nav-tabs {
    float: none;
    margin-right: auto;
    border-bottom: 1px solid #ddd;
    border-right: none;
.tabs-above .nav-tabs > li {
    float: left;
.tabs-above .nav-tabs > li > a {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
    margin-bottom: 0;
.tabs-above .nav-tabs .active > a,
.tabs-above .nav-tabs .active > a:hover {
    border-color: #ddd #ddd transparent #ddd;
Nate Radebaugh

JSFiddle of silviustan's code:

Mark Otto
mdo commented April 14, 2012

Solved this by increasing specificity rather than adding a new class.

Mark Otto mdo closed this April 14, 2012
Simon Templer stempler referenced this issue from a commit in stempler/bootstrap April 14, 2012
Mark Otto (less) fix #1823: styles of tabs within other tabs resolved e2c403e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.