How to disable stacking of bootstrap justified tabs on small screens

Question

I have seen this post, but being a new user I can\'t comment to ask for clarification.

I\'m using the justified nav tabs in Bootstrap and don\'t want them to stack o

Answer 1

Try adding col-xs-6 before the links

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <div class="col-xs-6">
      <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  </div>    
  <div class="col-xs-6">    
      <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
  </div>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="ratings">This is a rating section</div>
  <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>

you can check it out here Bootply

Answer 2

Other simple solution is to add flex class to <ul> element instead of nav-justified

.just {
  display: flex;
  flex-flow: row nowrap;
}

.just > li {
  flex: 1 auto;
  text-align: center;
  white-space: nowrap;
}

jsFiddle
Note that in case of many tabs, some of them may go behind your screen. To prevent this you can add wrap instead of nowrap to the flex flow. That way they will indeed get stacked but only in case when things would normally get behind screen, meaning breakpoint for warp stacking is smaller than in case of nav-justified. Go ahead and use row wrap on my Fiddle and resize screen to see what I am talking about.

Answer 3

And edit of pjb's answer, 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 #ffffd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}

Answer 4

The problem with some of the other solutions is that the tabs will lose their borders and other design elements. The following media queries more fully ensure the tabs match in both condensed and wider displays:

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

Answer 5

A lot depends on whether you want to keep the default bootstrap intact and just add your custom theme on top. A lot of the time this makes sense as you might want to have stacked tabs for mobile later on down the track if you tabs list grows to 3 or 4, etc. What i would do is add a new class to the ul "custom-not-stacked" and then add this css to your stylesheet:

.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a, 
.nav-justified.custom-not-stacked>.active>a:focus, 
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ffffd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}

Answer 6

LESS - Bootstrap

This is the answer of @pjb converted into LESS. I'm currently using bootstrap.less so below is the style I implemented.

@media (max-width: @screen-xs-max) {

  .nav-justified {

    > li {
      display: table-cell;
      width: 1%;

      > a {
        border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
        border-radius: @border-radius-base @border-radius-base 0 0 !important;
        margin-bottom: 0 !important;
      }
    }
  }
}