33

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.

Improve this question
3
  • Seems correct to me and working here (note I added more styles to make tabs look correct) jsbin.com/wakuf/1/edit. Are you sure your CSS is being called? Commented Feb 26, 2014 at 5: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. Commented Feb 26, 2014 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). Commented Feb 10, 2016 at 18:36

9 Answers 9

Reset to default
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; } }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

The only solution the seemed to work for me. Best answer by far! Thanks
This seems a nice solution, but has one drawback: If you have many <li> items, you lose the responsiveness and get ugly horizontal scrollbar below certain width. Does anyone know how to fix this?
I improved it adding this other rule at the end in the media query: .nav-justified > li.active > a { border-bottom-width: 0px !important; }
Much better solution. I wish the masses could vote this as the accepted answer.
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...

Improve this answer

1 Comment

it's okay, but in mobile views it doesn't center in the middle of a div...
11

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; } }
Improve this answer

1 Comment

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
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.

Improve this answer

1 Comment

This worked incredibly well compared to the other solutions; some of the other solutions destroy the styling of the tabs.
6

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.

Improve this answer

1 Comment

Among the several related solutions, this is the only one that worked for me. Thanks!
5

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

Improve this answer

6 Comments

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!
I disagree that this is the right answer because styling is lost
Having a div as a direct child of a ul is not valid html
invalid html code should never be considered as an answer
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.
|
2

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; }
Improve this answer

Comments

2

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; } }
Improve this answer

Comments

0

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; } } } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.