Bootstrap : prevent "nav-tabs nav-justified" from stacking on small screen

Question

I'm using Twitter Bootstrap 3 and I have a sidebar and tabs in it.

enter image description here

<div class="col-md-4">
    <div class="side-posts">
        <ul class="nav nav-tabs nav-justified">
          <li class=""><a href="#recent" data-toggle="tab"><span data-icon="&#xe048;"></span> Recent</a></li>
          <li class="active"><a href="#top" data-toggle="tab"><span data-icon="&#xe0b0;"></span> Popular</a></li>
        </ul>

        <div class="tab-content">
        .....
        </div>
    </div>
</div>

When screen's width gets smaller the tabs stack on each other like this

enter image description here

Is it possible to keep the original look and prevent this change?

Just edited my answer, let me know if it works for you :) – Alessandro Incarnati Aug 31 '14 at 14:19 — Alessandro Incarnati, Aug 31 '14 at 14:19

Murhaf Sousli · Accepted Answer · 2015-02-13T02:02:48.927

I had to write my own tabs style to get it work.

enter image description here

Here is a live bootply

in case link got broken here is the css:

/* CSS used here will be applied after bootstrap.css */
body{
    background-color: #f2f2f2; 
}
.container{
    width: 325px;  
}
.side-posts{
    margin-top:15px;
}
.post-tabs{
  padding:0;
  margin-bottom:0;
  list-style-type: none;
  overflow: hidden;
}
.post-tabs li{
    display: inline;
}
.post-tabs a{
    display: block;
    z-index: 1;
    text-decoration: none;
    padding: 10px 15px;
    float:  left;
    width: 50%;
    text-align:center;
    border-bottom: 1px solid #dddddd;
    text-shadow: 1px 1px 0 white;
    transition:color 0.3s ease;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

    color:#3b5998;
}
.post-tabs a:hover{
    color:#e95c40;
}
.post-tabs li.active a{
    border-bottom: 0;
    color: #444444;
    z-index: 2;
}

.post-tabs li.active:first-child a {
    border-right: 1px solid #dddddd;
    box-shadow: inset -3px 0px 3px 0px rgba(0,0,0,0.4);
}
.post-tabs li.active:last-child a{
    border-left: 1px solid #dddddd;
    box-shadow: inset 3px 0px 3px 0px rgba(0,0,0,0.4);
}
.tab-content{
    height:400px;  
    background-color: #dddddd;
}

Since the referenced link could die, would you please add the relevant css to your answer? Thanks — pymarco, Feb 11 '15 at 18:27
Instead of re-writing the Bootstrap tab control which is a bit of overkill, I used @james answer here: http://stackoverflow.com/questions/22032136/how-to-disable-stacking-of-bootstrap-justified-tabs-on-small-screens — FirstVertex, Mar 24 '15 at 20:18

score 1 · Answer 2 · answered Aug 31 '14 at 14:14

1

You can add float:left; and remove float:none; editing the mobile media query inside bootstrap like:

 @media (min-width: 768px){
    .nav-tabs.nav-justified > li {
        float: none;
        }
    }

@media (max-width: 768px){
.nav-tabs.nav-justified > li {
    float: left;
    }
}

DEMO http://jsfiddle.net/a_incarnati/52VtD/7771/

answered Aug 31 '14 at 14:14

Alessandro Incarnati

7,018
3
38
54

Please provide a jsfiddle of it with the images in the picture. Thanks – Alessandro Incarnati Aug 31 '14 at 16:45
no need for jsfiddle, it is as simple as the code I posted, default bootstrap, no extras – Murhaf Sousli Aug 31 '14 at 17:23
It works for me...did u see the demo? What is the issue? It is like in the first picture if u try to resize the viewport. – Alessandro Incarnati Aug 31 '14 at 17:34

Sikhumbuzo Dlamini · Answer 3 · 2016-07-13T11:20:08.730

This worked perfectly for me, even keeps the default styling for bootstrap justified nav-bar.**

@media (max-width: 768px){
    .nav-justified > li {
        display: table-cell;
        width: 1%;
  }
    .nav-justified > li > a  {
        border-bottom: 1px solid #ddd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}

Bootstrap : prevent "nav-tabs nav-justified" from stacking on small screen

3 Answers3