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

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