Full width tabs using Bootstrap (Support IE)

Question

I\'m trying to adjust Bootstrap tabs to make them span the full width of their container. Here\'s my code (a minimal working example):

<         


        

Answer 1

Maybe I've found your solution:

Create that class with css:

.take-all-space-you-can{
    width:100%;
}

And then apply that class to your li tags into your ul. Doing these all the li takes the space that they can and automatically divide the space in the single row.

DEMO

Answer 2

Try

.nav-tabs > li {
    float:none;
    display: table-cell;
    width: 1%;
}

Answer 3

Try this solution, just one line of code to achieve that.

.full-width-tabs > ul > li {   width: 100%;  }  

It will make the tabs to span full width of their container.

Look at jsfiddle : http://jsfiddle.net/BhGKf/

Answer 4

You can use javascript and jquery.

Building on Nick Bull's answer above, you can dynamically determine the number of tabs on the page using Jquery.

Try this on your html page.

<script type="text/javascript">
   $(document).ready(function() {
       var numTabs = $('.nav-tabs').find('li').length;
       var tabWidth = 100 / numTabs;
       var tabPercent = tabWidth + "%";
       $('.nav-tabs li').width(tabPercent);
   });
</script>

Answer 5

Update 2019 - Bootstrap 4

For future readers, it's now very simple to get full-width Tabs using the nav-fill class. This works on all modern browsers including IE 11+...

To get full width tabs, use (sized by tab content):

  <ul id="myTabs" class="nav nav-tabs nav-fill">
      <li class="nav-item"><a href="#tab1" data-target="#tab1" data-toggle="tab" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#tab1" data-target="#tab2" data-toggle="tab" class="nav-link active">Profile</a></li>
      <li class="nav-item"><a href="#tab3" data-target="#tab3" data-toggle="tab" class="nav-link">Messages</a></li>
  </ul>

Demo

To get full equal width tabs, use nav-justified:

<ul class="nav nav-tabs nav-justified">
     <li class="nav-item">...</li>
</ul>

Answer 6

Twitter Bootstrap 3 contains a class for this, the nav-justified class.

Use it like so:

<ul class="nav nav-tabs nav-justified">
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
</ul>