Same height for nav tabs

Question

I have boot tabs, and some of them have very long text and create an ugly space between the tabs and the content. How can I set other tabs the same size as the largest?

<div class="tabs">
<ul class="nav nav-tabs nav-justified">
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-wifi"/> Not that long</a>
    </li>
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-map-marker"/> Something really really really long</a>
    </li>
    <li>
        <a href="#" class="text-center">
            <i class="fa fa-map-marker"/> Not that long</a>
    </li>
    <li class="active">
        <a href="#" class="text-center">
            <i class="fa fa-star"/> Not that long</a>
    </li>
</ul>
<div class="tab-content"></div>
</div>

Answer 1

Found a solution!

<style>
.nav-tabs{
    display: flex;
}
.nav-tabs li {
    display: flex;
    flex: 1;
}

.nav-tabs li  a {
    flex: 1;
}
</style>

Answer 2

You can make them all higher or you can shorten the tab title too long. The names of the tabs should not really be very long.

Answer 3

If you cannot use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as possible, with a pixel height. flexbox is a big and, unfortunately, not yet fully used solution to this problem. Without this, there is no flexible way to accomplish this.