Tabs full width if more than one line with css

Question

I have several tabs with standard bootstrap 3.0 (nav-tabs) like this

| XXXXX | YYYYY | ZZZZZZ |_________________ 

and if I, for example, judge the screen twice, I get this

 | XXXXX | YYYYY | | ZZZZZ |________ 

but I want the tab to move to the second line, it should be 100% wide like this

 | XXXXX | YYYYY | | ZZZZZ | 

always full width if tabs don't fit on one line

 | XXXXX | YYYYY | | AAAAA | BBBBB | | ZZZZZ | 

JSFiddle - https://jsfiddle.net/28rhp52s/

Is this only possible with css?

UPDATE

if the tabs fit on one line (without the last, for example), they don’t want to move

 | XXXXX | YYYYY | ZZZZZ | | AAAAA | 

but great if they always move uniformly in this way

 | XXXXX | YYYYYY | | ZZZZZ | AAAAAA | | XXXXX | YYYYYY | | ZZZZZ | | XXXXX | YYYYY | ZZZZZ | | AAAAA | BBBBB | 

Answer 1

Remove floating behavior:

You need to update the list items to remove the floating behavior and add text-center for the parent element.

JSfiddle Demo

 body { margin: 10px; } @media (max-width: 991px) { .nav.nav-tabs > li { display: inline-block; float: none; width: 49%; } } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <ul class="nav nav-tabs text-center"> <li role="presentation" class="active"><a href="#">XXXXXXXXXXXXXXXXXX</a> </li> <li role="presentation"><a href="#">YYYYYYYYYYYYYYYYYY</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> </ul> 

Flexible Box Method:

A modern browser method to make elements more flexible and elements occupy 50% of the parent container. This is a template, you can use various media queries and flex-basis values ​​to achieve what you need.

JSfiddle Demo

 body { margin: 10px; } @media (max-width: 991px) { .nav-tabs { display: flex; flex-wrap: wrap; justify-content: center; } .nav-tabs > li { flex: 1 1 33%; } } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <ul class="nav nav-tabs text-center"> <li role="presentation" class="active"><a href="#">XXXXXXXXXXXXXXXXXX</a> </li> <li role="presentation"><a href="#">YYYYYYYYYYYYYYYYYY</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> <li role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li> </ul> 

Answer 2

You can use media query and center the last li inside .nav-tabs

 @media screen and (max-width: 320px) { .nav-tabs>li:last-child { clear: both; float: none; text-align: center; } } 

Or use .col-xs-12 and .text-center in the last li

 <li class="col-xs-12" role="presentation"><a href="#">ZZZZZZZZZZZZZZZZZZ</a> </li>