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 on small screens, since I only have 2 tabs. I would like them to remain side by side, just shrink down to fit the screen. This is what I have:

    <!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
  <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
  <li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</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>

As the related post suggests using media queries, I cannot seem to make that work. I had tried setting the following to target just small screens:

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

I'm not sure what I'm doing wrong so any help is greatly appreciated.

Seems correct to me and working here (note I added more styles to make tabs look correct) http://jsbin.com/wakuf/1/edit. Are you sure your CSS is being called? — davidpauljunior, Feb 26 '14 at 05:15
Thanks, it worked! The only difference was that I didn't have the 1% width applied originally, and that seems to have made it work. — user2654108, Feb 26 '14 at 22:26
This doesn't always work for more than two tabs. I tried with 3 nav-pills and it left too much space between them, kicking the third to the next line. The accepted answer did work, though (using col-xs-4). — Rachel S, Feb 10 '16 at 18:36

score 52 · Answer 1 · answered Jul 08 '14 at 23:19

52

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 #ddd !important;
    border-radius: 4px 4px 0 0 !important;
    margin-bottom: 0 !important;
  }
}

answered Jul 08 '14 at 23:19

peter bray

1,325
1
12
22

2

The only solution the seemed to work for me. Best answer by far! Thanks – Suleiman19 Jun 20 '15 at 10:51
This seems a nice solution, but has one drawback: If you have many
items, you lose the responsiveness and get ugly horizontal scrollbar below certain width. Does anyone know how to fix this?

mzrnsh

Sep 02 '15 at 08:19

I improved it adding this other rule at the end in the media query: .nav-justified > li.active > a { border-bottom-width: 0px !important; } – Gianluigi Liguori May 04 '18 at 20:17

Much better solution. I wish the masses could vote this as the accepted answer. – Wonko the Sane Nov 28 '20 at 15:04

score 11 · Answer 2 · answered May 12 '14 at 23:59

11

There is a really simple way to prevent stacking:

CSS:

.nav li {
    display:table-cell !important;
}

I searched for this and was annoyed by answers involving custom building bootstrap (I use CDN), and LESS (which I don't use)

This works great for me...

answered May 12 '14 at 23:59

mattdlockyer

6,984
4
40
44

it's okay, but in mobile views it doesn't center in the middle of a div... – Jonathan Laliberte Feb 18 '18 at 09:37

score 11 · Answer 3 · answered Jul 15 '14 at 21:55

I've attempted to edit @pjb answer as it's incomplete. But my edit was rejected, twice, as apparently it's 'incorrect'. Although plunker would tend to disagree...

This is the original that shows that the active tabs bottom border is showing when condensed

http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview

And this version, where it's clearly not showing

http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview

@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-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff !important;
  }
}

Instead of affecting all tab controls, I used a class called `no-stack` and apply it in addition to the `nav-justified` class in my html. I changed @james's css selectors to look like `.nav-justified.no-stack` — FirstVertex, Mar 24 '15 at 20:21

score 8 · Answer 4 · edited May 23 '17 at 12:26

8

In addition to james answer if you don't want to limit max-width to 768px you can do:

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

Should I avoid using !important in CSS?

If you prefer to avoid using !important in CSS paste the code after the bootstrap inclusion.

edited May 23 '17 at 12:26

Community

1
1

answered Jan 05 '15 at 17:34

RafaSashi

16,483
8
84
94

2

This worked incredibly well compared to the other solutions; some of the other solutions destroy the styling of the tabs. – munchschair Aug 25 '16 at 02:50

score 6 · Accepted Answer · answered Feb 26 '14 at 15:26

6

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

answered Feb 26 '14 at 15:26

colinplusplus

303
1
4

Thanks! This too seems to work. Any reason why one solution would be better than the other? – user2654108 Feb 26 '14 at 22:27
1

this is the proper solution as per the bootstrap docs. if you don't specify your layout the default will be col-xs-12 (all twelve grids). This to me is a better solution because you don't have to add extra lines of css. A css class already exists for this problem. Don't Repeat Yourself (D.R.Y). please mark this questioned answered. Thanks! – colinplusplus Feb 27 '14 at 16:33
10

I disagree that this is the right answer because styling is lost – pymarco Feb 11 '15 at 18:42
19

Having a div as a direct child of a ul is not valid html – partypete25 Feb 16 '15 at 23:06
2

invalid html code should never be considered as an answer – ian Dec 21 '16 at 04:12
This does not work. You cannot nest a div element inside a ul tag. That is invalid html. Also, this will cause styling to be lost. – burgoyne May 13 '19 at 13:59

score 6 · Answer 6 · answered Apr 26 '17 at 12:49

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.

Among the several related solutions, this is the only one that worked for me. Thanks! — foamroll, Dec 11 '17 at 01:27

score 2 · Answer 7 · answered Feb 16 '15 at 23:22

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 #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}

score 2 · Answer 8 · answered Jul 13 '16 at 11:19

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 #ddd !important;
        border-radius: 4px 4px 0 0 !important;
        margin-bottom: 0 !important;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}

score 0 · Answer 9 · answered Apr 15 '16 at 18:08

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;
      }
    }
  }
}

How to disable stacking of bootstrap justified tabs on small screens

9 Answers9

Linked