CODEWITHSUNDEEP
csstwitter-bootstraptabs
zdarsky.peter
zdarsky.peter

Reputation: 6257

Same height for nav tabs

I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?

enter image description here

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

Upvotes: 7

Views: 10474

Answers (3)

zdarsky.peter
zdarsky.peter

Reputation: 6257

Found a solution!

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

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

Upvotes: 15

ingridly
ingridly

Reputation: 159

If you can't use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as the tallest one explicitly with a pixel height. Flexbox is a great and sadly not yet fully usable solution to this kind of problem. Without it, there's no flexible way to accomplish this.

Upvotes: 0

gegillam
gegillam

Reputation: 136

You can either make them all taller or you can shorten the name of the tab that's too long. Tab names shouldn't really be very long anyways.

Upvotes: 0

Related Questions