Full width tabs using Bootstrap (Support IE)

35
votes

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

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Full Width Tabs using Bootstrap</title>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style>
            .full-width-tabs > ul.nav.nav-tabs {
                display: table;
                width: 100%;
                table-layout: fixed; /* To make all "columns" equal width regardless of content */
            }
            .full-width-tabs > ul.nav.nav-tabs > li {
                float: none;
                display: table-cell;
            }
            .full-width-tabs > ul.nav.nav-tabs > li > a {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="tabbable full-width-tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-one" data-toggle="tab">Tab 1</a></li>
                <li><a href="#tab-two" data-toggle="tab">Tab 2</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-one">
                    I'm in Tab 1.
                </div>
                <div class="tab-pane" id="tab-two">
                    Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. Howdy, I'm in Tab 2. 
                </div>  
            </div> 
        </div> <!-- /tabbable -->

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    </body>
</html>

I get this (undesired) result:

Undesired tabs

However, I want the tab "headers" to span the entire width of the tab container - and distribute their individual width's evenly, something like this desired result:

desired tabs

How do I achieve that?

Update 1: Here's a JSFiddle: http://jsfiddle.net/agib/FZy4n/

Update 2: I already had a working widget using custom javascript. However, I'm looking for a solution that integrates seemlessly with Bootstrap and thus relies only on standard Bootstrap javascript.

Update 3: If I remove / comment out

 /* table-layout: fixed; */

header widths are taking up all horizontal space as needed. However, their widths are resulting from the length of the header texts and thus not distributed evenly.

This is not what I want either:

undesired tabs

Update 4: The upcoming Bootstrap 3 appears to have full-width tabs as a standard component using the class .nav-justified: Bootstrap 3 -> Navs -> Justified nav

9
htmlcsstwitter-bootstraptabs
It's like there is horizontal space for an extra tab "header" before and after the actual headers, but I can't figure out where that should come from. - agibsen
How many tabs do you want? Only 2? - rpasianotto
Yeah, using Bootstrap 3 is the real solution, besides none of the answers given do that across all browsers. You should post that as an answer. - user568109

9 Answers

68
votes

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

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

5
votes

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

Bootstrap 4

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

Try 

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

Simple:

.nav-tabs > li {
    /* width = (100 / number of tabs). This example assumes 3 tabs. */
    width:33.33333%;
}

Hope that helps!

1
votes

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/

0
votes

Try this, for all '.nav-pills' and each 'li' element inside with double loop.

function(){
$('.nav.nav-tabs').each(function(){
    var liGroup = $(this).children('li');
    var liLength= liGroup.length;
    liGroup.each(function(){
        var liWidth = 100/liLength-1;
        $(this).css({'min-width': liWidth+'%','margin-left':'0px','margin-right':'0px'});
    });
});}

DEMO http://jsfiddle.net/

0
votes
<style>
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        flex: auto;
}
    
.nav-tabs .nav-link {
        flex: auto;
}
</style>

This is what i was looking for.