Menu
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?
<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>
831
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .
Approach: To create a tabbed navigation menu, create a basic unordered list with list items as links. Then add classes nav and nav-tabs of bootstrap to unordered list and nav-items class to list items.
Tabs are used to separate content into different panes where each pane is viewable one at a time. For a tutorial about Tabs, read our Bootstrap Tabs/Pills Tutorial.
role=presentation on <li> is ONLY needed if there is a role on <ul> too e.g. <ul role="tablist"> . It's because <li> belongs to <ul> but not to <ul role="tablist"> . Such element is not <ul> anymore. It's same as <div role="tablist"> now - its semantics has changed by assigning a role .
Found a solution!
<style>
.nav-tabs{
display: flex;
}
.nav-tabs li {
display: flex;
flex: 1;
}
.nav-tabs li a {
flex: 1;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With