Responsive issue with Bootstrap 3.x nav-tabs

Question

I have a bootstrap component nav-tabs and it works normally when the page width is larger than needed for the line (bootstrap .row div). The problem is that when I change the view for mobile devices, responsive design is not behaving as it should and the tabs are misaligned. See the code in the link below, the extent to which the page width is decreased, the Company, Support and Design tabs are behaving strangely.

http://www.bootply.com/Ym1iDjaBjz#

Answer 1

That's normal because there is not enough space for all tabs.

You could reduce padding at .nav-tabs li a to create space or add the folowing rule to make them display in 100% width.

.nav-tabs > li, .nav-tabs li a { display: inline-block; width: 100%; }
.nav-tabs li a { border: 1px solid #ddd; }

Good Luck!

Answer 2

I've used the bootstrap-tabcollapase library in similar situations: https://github.com/flatlogic/bootstrap-tabcollapse

It's a third-party bootstrap add-on that converts tabs into accordion panels at small media query widths.