Search code examples
csstwitter-bootstraptwitter-bootstrap-3bootstrap-tabs

bootstrap 3 - Inverse nav-justifed

How to make nav-justified to act in reverse order? What I mean is, I want on small (mobile) screens from tabs/pills to be positioned horizontally, and on bigger (desktop) screens to be positioned vertically i.e. to be stacked.
Here's an example for which CSS rules need to be modified (resize its window to see how it would look on both type of screens): http://s.bootply.com/render/1d0Cpp0po1
Does anyone know how to achieve this on the simplest way? Thanks in advance!

Solution

  • Solved it with this CSS:

    .nav-justified-inverse > li {
    float: none;
}

@media (max-width: 768px) {
    .nav-justified-inverse > li {
        display: table-cell;
        width: 1%;
    }
}

    Demo: http://s.bootply.com/render/AtQH4rry48