Make tabs stack by default on phones

[ds125v]

I'm currently tweaking Bootstrap 2.3 in my app so that tabs ("nav nav-tabs") switch to being stacked tabs ("nav nav-tabs nav-stacked") at phone sizes (<480px), because it looks much better that way if your tabs are long enough to line wrap.

Since Bootstrap 3 is "mobile first", I thought that you might want to consider that as the default behavior, with an opt-out class for those that want their tabs to remain in either of the two states permanently (for example if you know your tab content ahead of time is going to be very narrow, just icons perhaps).

Similar may apply to other related navs, I've used them less so I don't have a firm opinion.

[tjhanley]

+1

[ghost]

+1

[koonse]

@ds125v how are you currently implementing it? I'm trying to do the same thing.

[ds125v]

@bennyfreshness Mostly just a cut'n'paste of nav-stacked classes applied to override nav-tabs at the desired width. Obviously not the right way to do it 'mobile first', but works for me:

@media (max-width: 480px) {
    // make tabs act like nav-stacked
    // (mostly) copied from bootstrap/navs.less
    .nav-tabs > li {
        float: none;
    }
    .nav-tabs > li > a {
        margin-right: 0; // no need for the gap between nav items
    }
    .nav-tabs {
        border-bottom: 0;
    }
    .nav-tabs > li > a {
        border: 1px solid #ddd;
        .border-radius(0);
    }
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover {
        border: 1px solid #ddd;
    }
    .nav-tabs > li:first-child > a {
        .border-top-radius(4px);
    }
    .nav-tabs > li:last-child > a {
        .border-bottom-radius(4px);
    }
    .nav-tabs > li > a:hover,
    .nav-tabs > li > a:focus {
        border-color: #ddd;
        z-index: 2;
    }

[mdo]

For now I think we'll pass on this on doing this. We might revisit before finalizing v3, but I don't think changing the interface of the tabs makes sense right now.

[alexweber]

That's a shame, something like Foundation's "Section" component would be awesome: http://foundation.zurb.com/docs/components/section.html

[mattpi]

+1
This is an issue I come across fairly often building sites with bootstrap - the fact that the tabs fall apart.
Foundations solution is very neat.

[semi-sentient]

I would love to see responsive tabs added in the BS3 release. This is currently an issue that I'm trying to deal with so I'd rather have that support out of the box instead of implementing my own solution -- which isn't necessarily hard but if BS3 eventually adds that then I'll have to do some refactoring. If this is indeed a mobile-first rewrite then I think it's a must have as tabs currently look a hot mess on mobile.

[Soundvessel]

A component not being responsive in a responsive framework is quite an annoying issue. We use BS3 with Drupal so it isn't really that easy nor efficient to try and switch that interface to accordions and back again.

[donaldpipowitch]

I would love to see this feature, too. I agree with @Soundvessel: Since BS3 is mobile first every widget should be responsive by default.

[Glideh]

This should actually behave as stacked nav rather than collapse for small viewports.

[ds125v]

There seems to be two different issues here: a) tabs as nav links to other related pages and b) tabs as triggers for javascript changes of content visibility.

People using the former were looking for it to become nav-stacked at small screen widths and people using the latter wanted it to become accordians

My original issue was a), and it seems that roughly what I was asking for was introduced in Bootstrap 3 as nav-justified

http://getbootstrap.com/components/#nav-justified

I'm not sure why this is done this way for justified navs and not the standard navs, but it mostly fills my needs as is.

[eduardomart]

3 years and still "passing" on this?. Sad.

[cvrebert]

I believe this falls under the "Rewrite tabs and pills to be mobile-first" todo item of #17021.